javascript圖片預(yù)加載實例分析
本文實例講述了javascript圖片預(yù)加載的方法。分享給大家供大家參考。具體如下:
lightbox類效果為了讓圖片居中顯示而使用預(yù)加載,需要等待完全加載完畢才能顯示,體驗不佳(如filick相冊的全屏效果)。javascript無法獲取img文件頭數(shù)據(jù),真的是這樣嗎?本文通過一個巧妙的方法讓javascript獲取它。
這是大部分人使用預(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; }; }; };
JavaScript代碼:
// 更新: // 05.27: 1、保證回調(diào)執(zhí)行順序:error > ready > load;2、回調(diào)函數(shù)this指向img本身 // 04-02: 1、增加圖片完全加載后的回調(diào) 2、提高性能 /** * 圖片頭數(shù)據(jù)加載就緒事件 - 更快獲取圖片尺寸 * @version 2011.05.27 * <a class="referer" target="_blank">@author</a> TangBin * <a class="referer" target="_blank">@see</a> http://www.planeart.cn/?p=1121 * @param {String} 圖片路徑 * @param {Function} 尺寸就緒 * @param {Function} 加載完畢 (可選) * @param {Function} 加載錯誤 (可選) * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height); }); */ var imgReady = (function () { var list = [], intervalId = null, // 用來執(zhí)行隊列 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, error) { var onready, width, height, newWidth, newHeight, img = new Image(); img.src = url; // 如果圖片被緩存,則直接返回緩存數(shù)據(jù) if (img.complete) { ready.call(img); load && load.call(img); return; }; width = img.width; height = img.height; // 加載錯誤后的事件 img.onerror = function () { error && error.call(img); onready.end = true; img = img.onload = img.onerror = null; }; // 圖片尺寸就緒 onready = function () { newWidth = img.width; newHeight = img.height; if (newWidth !== width || newHeight !== height || // 如果圖片已經(jīng)在其他地方加載可使用面積檢測 newWidth * newHeight > 1024 ) { ready.call(img); onready.end = true; }; }; onready(); // 完全加載完畢的事件 img.onload = function () { // onload在定時器時間差范圍內(nèi)可能比onready快 // 這里進行檢查并保證onready優(yōu)先執(zhí)行 !onready.end && onready(); load && load.call(img); // IE gif動畫會循環(huán)執(zhí)行onload,置空onload即可 img = img.onload = img.onerror = null; }; // 加入隊列中定期執(zhí)行 if (!onready.end) { list.push(onready); // 無論何時只允許出現(xiàn)一個定時器,減少瀏覽器性能損耗 if (intervalId === null) intervalId = setInterval(tick, 40); }; }; })();
調(diào)用例子:
imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height); });
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
js統(tǒng)計頁面上每個標(biāo)簽的數(shù)量實例代碼
這篇文章通過實例代碼給大家講解了通過js統(tǒng)計頁面上每個標(biāo)簽的數(shù)量,代碼很簡單,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05微信小程序開發(fā)app.json全局配置實戰(zhàn)指南
app.json文件是小程序的全局配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)app.json全局配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05每天一篇javascript學(xué)習(xí)小結(jié)(Date對象)
這篇文章主要介紹了javascript中的Date對象知識點,對Date對象的基本使用方法,以及各種方法進行整理,感興趣的小伙伴們可以參考一下2015-11-11BootStrap柵格系統(tǒng)、表單樣式與按鈕樣式源碼解析
這篇文章主要為大家詳細解析了BootStrap柵格系統(tǒng)、表單樣式與按鈕樣式源碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01JS中new?Blob()詳解及blob轉(zhuǎn)file示例
這篇文章主要給大家介紹了關(guān)于JS中new?Blob()詳解及blob轉(zhuǎn)file的相關(guān)資料,Blob?Blob(Binary?Large?Object)表示二進制類型的大對象,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript與jQuery中文檔就緒函數(shù)的區(qū)別,文章內(nèi)容介紹詳細,具有一的的參考價值,需要的小伙伴可以參考一下2022-03-03JavaScript面向?qū)ο笕齻€基本特征實例詳解【封裝、繼承與多態(tài)】
這篇文章主要介紹了JavaScript面向?qū)ο笕齻€基本特征,結(jié)合實例形式詳細分析了JavaScript面向?qū)ο笕齻€基本特征封裝、繼承與多態(tài)的概念、原理、用法與操作注意事項,需要的朋友可以參考下2020-05-05