快捷導(dǎo)航

再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)

更新時(shí)間：2011年03月12日 18:19:18 作者：

由于javascript無法獲取img文件頭數(shù)據(jù)，必須等待其加載完畢后才能獲取真實(shí)的大小，所以lightbox類效果為了讓圖片居中顯示，導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。

而本文所提到的預(yù)加載技術(shù)主要是讓javascript快速獲取圖片頭部數(shù)據(jù)的尺寸。

一段典型的使用預(yù)加載獲取圖片大小的例子：

 
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; 
}; 
}; 
}; 

可以看到使用onload的方式必須等待圖片加載完畢，其速度不敢恭維。
web應(yīng)用程序區(qū)別于桌面應(yīng)用程序，響應(yīng)速度才是最好的用戶體驗(yàn)。如果想要速度與優(yōu)雅兼得，那就必須提前獲得圖片尺寸，如何在圖片沒有加載完畢就能獲取圖片尺寸？
十多年的上網(wǎng)經(jīng)驗(yàn)告訴我：瀏覽器在加載圖片的時(shí)候你會(huì)看到圖片會(huì)先占用一塊地然后才慢慢加載完畢，并且這里大部分的圖片都是沒有預(yù)設(shè)width與height屬性的，因?yàn)闉g覽器能夠獲取圖片的頭部數(shù)據(jù)?；诖?，只需要使用javascript定時(shí)偵測(cè)圖片的尺寸狀態(tài)便可得知圖片尺寸就緒的狀態(tài)。
實(shí)現(xiàn)代碼（2011-03-11更新）：
2011-03-12 更新：
只使用一定時(shí)器，優(yōu)化性能

復(fù)制代碼代碼如下:

 
/*! 
* img ready v0.3 
* http://www.planeart.cn/?p=1121 
* TangBin - MIT Licensed 
*/ 
// 圖片頭數(shù)據(jù)加載就緒事件 
// @param {String} 圖片路徑 
// @param {Function} 獲取尺寸的回調(diào)函數(shù) (參數(shù)1接收width；參數(shù)2接收height) 
// @param {Function} 加載錯(cuò)誤的回調(diào)函數(shù) (可選) 
(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; 
}; 
this.imgReady = function (url, callback, error) { 
var check, end, width, height, offsetWidth, offsetHeight, div, 
accuracy = 1024, 
doc = document, 
container = doc.body || doc.getElementsByTagName('head')[0], 
img = new Image(); 
img.src = url; 
if (!callback) return img; 
// 如果圖片被緩存，則直接返回緩存數(shù)據(jù) 
if (img.complete) return callback(img.width, img.height); 
// 向頁面插入隱秘圖像，用來監(jiān)聽圖片是否占位 
div = doc.createElement('div'); 
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden'; 
div.appendChild(img) 
container.appendChild(div); 
width = img.offsetWidth; 
height = img.offsetHeight; 
// 完全加載完畢的事件 
img.onload = function () { 
end(); 
callback(img.width, img.height); 
}; 
// 加載錯(cuò)誤后的事件 
img.onerror = function () { 
end(); 
error && error(); 
}; 
// 檢測(cè)圖片是否已經(jīng)占位 
check = function () { 
offsetWidth = img.offsetWidth; 
offsetHeight = img.offsetHeight; 
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) { 
end(); 
callback(offsetWidth, offsetHeight); 
}; 
}; 
check.url = url; 
// 操作結(jié)束后進(jìn)行清理 
// 刪除元素與事件，避免IE內(nèi)存泄漏 
end = function () { 
check.end = true; 
img.onload = img.onerror = null; 
div.innerHTML = ''; 
div.parentNode.removeChild(div); 
}; 
// 將檢測(cè)圖片是否占位的函數(shù)加入定時(shí)器列隊(duì)定期執(zhí)行 
// 同一圖片只加入一個(gè)檢測(cè)器 
// 無論何時(shí)只允許出現(xiàn)一個(gè)定時(shí)器，減少瀏覽器性能損耗 
!check.end && check(); 
for (var i = 0; i < list.length; i ++) { 
if (list[i].url === url) return; 
}; 
if (!check.end) { 
list.push(check); 
if (!intervalId) intervalId = setInterval(tick, 150); 
}; 
}; 
})(); 

是不是很簡(jiǎn)單？這樣的方式獲取攝影級(jí)別照片尺寸的速度往往是onload方式的幾十多倍，而對(duì)于web普通(800×600內(nèi))瀏覽級(jí)別的圖片能達(dá)到秒殺效果。
好了，請(qǐng)觀賞令人愉悅的 DEMO ： http://demo.jb51.net/js/2011/imgready/
（通過測(cè)試的瀏覽器：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8）
來自:: 唐斌

您可能感興趣的文章: