图片加载完成以前获取图片高度

在图片加载完成以前就获取到图片的高度和宽度，对于提升页面性能和交互有很是巨大的做用，相信你们也是明白的。

其实原理很是简单，利用的就是浏览器加载图片时的一个策略：当图片头部信息加载完成后，浏览器即获知了图片的大小，而后就会在页面上空出相应的区域来，而后再下载图片的剩余数据而且显示到以前空出的区域中。

因此咱们要作的就是：不断的去问浏览器你获得高度信息了没有，问到以后就能够立刻作相应的处理，而此时图片尚未下载完成。

反映到代码上就是：

以前咱们是这样获取高度的：

var img = new Image(); img.src = url; 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 = url; // 若是图片被缓存，则直接返回缓存数据 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 () { // onload在定时器时间差范围内可能比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 则不能这么作，由于浏览器是另一套处理逻辑了。