由（yóu）於javascript無法獲取img文（wén）件頭數據，必須等待其加載（zǎi）完畢（bì）後才能（néng）獲取真實的（de）大小，所以lightbox類效果為了讓圖片居（jū）中顯示，導致其速度體驗要比直接輸出的差很多。而本文所提到（dào）的預加載技術主要是讓javascript快速（sù）獲取圖片頭部數據的尺寸。
一段（duàn）典型（xíng）的（de）使用預加載獲取圖片大小（xiǎo）的（de）例子：
|
var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};
|
可以看到（dào）使用onload的方式（shì）必須等待圖（tú）片加載完畢，其速（sù）度不敢恭維。
web應用程序區別於桌麵應用程序，響應速度才是最（zuì）好的（de）用戶體（tǐ）驗。如果想（xiǎng）要速度與優雅兼得，那（nà）就必須提前獲得（dé）圖（tú）片尺寸，如何在圖片沒有加載完畢就能獲取圖片尺寸？
十多年的上網經驗告（gào）訴我：瀏覽器在加載圖片（piàn）的時候你會看到圖片會先占用一塊地然後才慢慢加載完畢，並且這裏大部分（fèn）的圖片都是沒有預設width與height屬性的，因為瀏覽器能夠獲取圖片的頭部數據。基（jī）於此，隻需要使用javascript定時偵測（cè）圖片的尺寸狀（zhuàng）態便（biàn）可得知圖片尺寸就緒的狀態。
實現代碼：
|
var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;
img.src = url;
// 從緩（huǎn）存中讀取
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);
};
// 圖片（piàn）加載錯（cuò）誤
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
};
|
是不是很簡單？這樣（yàng）的方式獲取攝影級別照片（piàn）尺寸的（de）速（sù）度（dù）往往是onload方式的幾十（shí）多倍，而對於web普通(800×600內)瀏覽級別的圖片能達到秒殺效果。
