熱烈祝賀臺州維博網絡的站長論壇隆重上線!(2012-05-28)    熱烈慶祝偉大的祖國60周年生日 點擊進來我們一起為她祝福吧(2009-09-26)    站長論壇禁止發布廣告,一經發現立即刪除。謝謝各位合作!.(2009-08-08)    熱烈祝賀臺州網址導航全面升級,全新版本上線!希望各位一如既往地支持臺州網址導航的發展.(2009-03-28)    臺州站長論壇恭祝各位新年快樂,牛年行大運!(2009-01-24)    臺州Link正式更名為臺州網址導航,專業做以臺州網址為主的網址導航!(2008-05-23)    熱烈祝賀臺州Link資訊改名為中國站長資訊!希望在以后日子里得到大家的大力支持和幫助!(2008-04-10)    熱烈祝賀臺州Link論壇改名為臺州站長論壇!希望大家繼續支持和鼓勵!(2008-04-10)    臺州站長論壇原[社會瑣碎]版塊更名為[生活百科]版塊!(2007-09-05)    特此通知:新臺州站長論壇的數據信息全部升級成功!">特此通知:新臺州站長論壇的數據信息全部升級成功!(2007-09-01)    臺州站長論壇對未通過驗證的會員進行合理的清除,請您諒解(2007-08-30)    臺州網址導航|上網導航誠邀世界各地的網站友情鏈接和友誼聯盟,共同引領網站導航、前進!(2007-08-30)    禁止發廣告之類的帖,已發現立即刪除!(2007-08-30)    希望各位上傳與下載有用資源和最新信息(2007-08-30)    熱烈祝賀臺州站長論壇全面升級成功,全新上線!(2007-08-30)    
便民網址導航,輕松網上沖浪。
臺州維博網絡專業開發網站門戶平臺系統
您當前的位置: 首頁 » JavaScript/JQuery編程 » 再談javascript圖片預加載技術

再談javascript圖片預加載技術

論壇鏈接
  • 再談javascript圖片預加載技術
  • 發布時間:2011-03-11 12:44:14    瀏覽數:6766    發布者:tzlink    設置字體【   
由于javascript無法獲取img文件頭數據,必須等待其加載完畢后才能獲取真實的大小,所以lightbox類效果為了讓圖片居中顯示,導致其速度體驗要比直接輸出的差很多。而本文所提到的預加載技術主要是讓javascript快速獲取圖片頭部數據的尺寸。

一段典型的使用預加載獲取圖片大小的例子:

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

};highlight: php可以看到使用onload的方式必須等待圖片加載完畢,其速度不敢恭維。

web應用程序區別于桌面應用程序,響應速度才是最好的用戶體驗。如果想要速度與優雅兼得,那就必須提前獲得圖片尺寸,如何在圖片沒有加載完畢就能獲取圖片尺寸?

十多年的上網經驗告訴我:瀏覽器在加載圖片的時候你會看到圖片會先占用一塊地然后才慢慢加載完畢,并且這里大部分的圖片都是沒有預設width與height屬性的,因為瀏覽器能夠獲取圖片的頭部數據;诖,只需要使用javascript定時偵測圖片的尺寸狀態便可得知圖片尺寸就緒的狀態。

實現代碼:

/*!
* img ready
* http://www.planeart.cn/?p=1121
* TangBin - MIT Licensed
*/

// @param {String} 圖片路徑
// @param {Function} 獲取尺寸的回調函數 (參數1接收width;參數2接收height)
// @param {Function} 加載錯誤的回調函數 (可選)
var 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 () {
// 如果圖像尺寸開始變化,則表示瀏覽器已經獲取了圖片頭數據并占位
// 經過實測只有監聽img.offsetWidth才有效,而img.offsetHeight是為了保險
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.offsetHeight);
// 清空img的事件與元素,避免IE內存泄漏
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};

// 定期執行檢測
intervalId = setInterval(check, 150);
};

// 等待圖片完全加載完畢
// 這是一個保險操作,如果上面的監聽尺寸方法失敗則會啟用此
// 如果很小的圖像有可能加載時間小于定時器定義的檢測間隔時間,則會停止定時器
img.onload = function () {
clearInterval(intervalId);
callback(img.width, img.height);
img.onload = img.onerror = null;
body && img.parentNode.removeChild(img);
};

// 圖像加載錯誤
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

};highlight: php是不是很簡單?這樣的方式獲取攝影級別照片尺寸的速度往往是onload方式的幾十多倍,而對于web普通(800×600內)瀏覽級別的圖片能達到秒殺效果。

好了,請觀賞令人愉悅的 DEMO : http://www.planeart.cn/demo/imgReady/

(通過測試的瀏覽器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8)
娛樂休閑專區A 影視預告B 音樂咖啡C 英語階梯D 生活百科
網頁編程專區E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技術區 N 系統管理O 服務器架設P 網絡/硬件Q 編程序開發R 內核/嵌入
管理中心專區S 發布網址T 版主議事U 事務處理
陕西快乐10分玩法 湖北11选5开奖结果 内蒙古快三预测一定牛 体彩快中彩 安徽快三计划网址 福彩3d开机号今天 时时彩官方开奖视频 山西11选5台子 贵州体彩十一选五 凤凰娱乐app注册 安微体彩11迭5走势图