首页 > 代码库 > 图片加载完成之前获取图片高度
图片加载完成之前获取图片高度
在图片加载完成之前就获取到图片的高度和宽度,对于提高页面性能和交互有非常巨大的作用,相信大家也是明白的。
其实原理非常简单,利用的就是浏览器加载图片时的一个策略:当图片头部信息加载完成后,浏览器即获知了图片的大小,然后就会在页面上空出相应的区域来,然后再下载图片的剩余数据并且显示到之前空出的区域中。
所以我们要做的就是:不断的去问浏览器你得到高度信息了没有,问到之后就可以马上做相应的处理,而此时图片还没有下载完成。
反映到代码上就是:
之前我们是这样获取高度的:
var img = new Image();img.src = http://www.mamicode.com/url;"hljs-keyword">if (img.complete) { console.log(img.height);}
而现在,则要这么做:
var imgReady = (function () { var list = [], intervalId = null, // 用来执行队列 tick = function () { var i = 0; for (; i < list.length; i++) { list[i].end ? list.splice(i--, 1) : list[i](); }; !list.length && stop(); }, // 停止所有定时器队列 stop = function () { clearInterval(intervalId); intervalId = null; }; return function (url, ready, load) { var onready, width, height, newWidth, newHeight, img = new Image(); img.src = http://www.mamicode.com/url;"hljs-comment">// 如果图片被缓存,则直接返回缓存数据 if (img.complete) { ready.call(img); load && load.call(img); return; }; width = img.width; height = img.height; // 图片尺寸就绪 onready = function () { newWidth = img.width; newHeight = img.height; if (newWidth !== width || newHeight !== height || // 如果图片已经在其他地方加载可使用面积检测 newWidth * newHeight > 1024 ) { ready.call(img); onready.end = true; }; }; onready(); // 完全加载完毕的事件 img.onload = function () { // onl oad在定时器时间差范围内可能比onready快 // 这里进行检查并保证onready优先执行 !onready.end && onready(); load && load.call(img); // IE gif动画会循环执行onload,置空onload即可 img = img.onload = img.onerror = null; }; // 加入队列中定期执行 if (!onready.end) { list.push(onready); // 无论何时只允许出现一个定时器,减少浏览器性能损耗 if (intervalId === null) intervalId = setInterval(tick, 40); }; };})();
代码取自腾讯图片详情页。
不过呢,这种做法仅适用于 img 元素的 src 属性是一个 URL 的情况,如果是 Data URI 则不能这么做,因为浏览器是另外一套处理逻辑了。
图片加载完成之前获取图片高度
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。