js图片之onload技术

由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小，所以lightbox类效果为了让图片居中显示，导致其速度体验要比直接输出的差很多。而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。

一段典型的使用预加载获取图片大小的例子：

ar imgReady = function (url, callback, error) {
 var width, height, intervalId, check, div,
 img = new Image(),
 body = document.body;
 
 img.src = url;
 
 // 从缓存中读取
 if (img.complete) {
 return callback(img.width, img.height);
 };
 
 // 通过占位提前获取图片头部数据
 if (body) {
 div = document.createElement('div');
 div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
 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 = '';
 div.parentNode.removeChild(div);
 };
 };
 
 intervalId = setInterval(check, 150);
 };
 
 // 加载完毕后方式获取
 img.onload = function () {
 callback(img.width, img.height);
 img.onload = img.onerror = null;
 clearInterval(intervalId);
 body && img.parentNode.removeChild(img);
 };
 
 // 图片加载错误
 img.onerror = function () {
 error && error();
 clearInterval(intervalId);
 body && img.parentNode.removeChild(img);
 };
 
 };

这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍，而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。