// 更新：// 05.27: 1、保證回撥執行順序：error > ready > load；2、回撥函式this指向img本身// 04-02: 1、增加圖片完全載入後的回撥 2、提高效能/** * 圖片頭資料載入就緒事件 - 更快獲取圖片尺寸 * @version 2011.05.27 * @author TangBin（PS:我不是作者，我只是程式碼的搬運工） * @see 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 () { /*list用來存放onready的函式佇列,intervalID用來存放定時器的引用*/ var list = [], intervalId = null, // 用來執行佇列 tick = function () { var i = 0; for (; i < list.length; i++) { /*end用來表示onready函式是否執行完必，splice用來刪除佇列中的專案*/ list[i].end ? list.splice(i--, 1) : list[i](); }; //佇列全部執行完成後的清除工作。 !list.length && stop(); }, // 停止所有定時器佇列,釋放記憶體中的引用 stop = function () { clearInterval(intervalId); intervalId = null; }; /** * 閉包 * @param:url 圖片的路徑 * @param:ready 圖片尺寸就緒的回撥函式 * @param: load 圖片載入完畢的回撥函式 * @param: err 圖片加載出錯的回撥函式 * */ return function (url, ready, load, error) { var onready, width, height, newWidth, newHeight, img = new Image(); img.src = url; // 如果圖片被快取，則直接返回快取資料 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 || // 如果圖片已經在其他地方載入可使用面積檢測 newWidth * newHeight > 1024 ) { ready.call(img); onready.end = true; }; }; onready(); // 完全載入完畢的事件 img.onload = function () { // onload在定時器時間差範圍內可能比onready快 // 這裡進行檢查並保證onready優先執行 !onready.end && onready(); load && load.call(img); // IE gif動畫會迴圈執行onload，置空onload即可 img = img.onload = img.onerror = null; }; // 加入佇列中定期執行 if (!onready.end) { list.push(onready); // 無論何時只允許出現一個定時器，減少瀏覽器效能損耗 if (intervalId === null) intervalId = setInterval(tick, 40); }; };})();