江苏龙网

  1. 首页 > 生活 > >

在移动端web开发中怎样避免因顶部的图片加载完成而导致的把正在浏览的位置往下推开的问题

除非事先知道图片的大小
■网友
第一，像一楼提到的，图片的懒加载逆用可以解决该问题。第二，提前获得图片尺寸。在第二点中有三种方法，引用自再谈javascript图片预加载技术 ：一、结合flash加载图片，获取图片头部数据的尺寸
flash虽然很强大，但它与生俱来的缺点让人爱恨交织，加上很多移动设备不支持falsh无疑更是致命的伤，还是放弃吧。
【在移动端web开发中怎样避免因顶部的图片加载完成而导致的把正在浏览的位置往下推开的问题】 二、在服务端保存图片尺寸数据
这里不得不提到腾讯Qzone的lightbox相册，它就是这样做的。它能在图片没有加载完全的时候就居中放大图片，速度与优雅基本兼得。不过它仍然难以避免blog插入的外链图片的问题，也只能按传统的方式加载完毕才能展示。
三、javascript通过占位方式获取图片头部数据的尺寸
十多年的上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且这里大部分的图片都是没有预设width与height属性的，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
var imgReady = function (url, callback, error) { var width, height, intervalId, check, div, img = new Image(), body = document.body; img.src = https://www.zhihu.com/api/v4/questions/24872393/url; // 从缓存中读取 if (img.complete) { return callback(img.width, img.height); }; // 通过占位提前获取图片头部数据 if (body) { div = document.createElement(/u0026#39;div/u0026#39;); div.style.cssText = /u0026#39;visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden/u0026#39;; div.appendChild(img) body.appendChild(div); width = img.offsetWidth; height = img.offsetHeight; check = function () { if (img.offsetWidth !== width || img.offsetHeight !== height) { clearInterval(intervalId); callback(img.offsetWidth, img.clientHeight); img.onload = null; div.innerHTML = /u0026#39;/u0026#39;; div.parentNode.removeChild(div); }; }; intervalId = setInterval(check, 150); }; // 加载完毕后方式获取 img.onload = function () { callback(img.width, img.height); img.onload = img.onerror = null; clearInterval(intervalId); body /u0026amp;/u0026amp; img.parentNode.removeChild(img); }; // 图片加载错误 img.onerror = function () { error /u0026amp;/u0026amp; error(); clearInterval(intervalId); body /u0026amp;/u0026amp; img.parentNode.removeChild(img); };};-----------------------------------------以上为学习图片懒加载技术时偶然所得。
■网友
是不是可以让加载完的图片在视图范围内的时候再显示，试试。


    推荐阅读


    上一篇：郑州云和数据公司咋样

    下一篇：能否实现win10平板画面无线投影在同一局域网内的WIN10台式机的显示器上