// 更新：
// 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
 * @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的函數(shù)隊列,intervalID用來存放定時器的引用*/
  var list = [], intervalId = null,
  // 用來執(zhí)行隊列
  tick = function () {
    var i = 0;
    for (; i < list.length; i++) {
      /*end用來表示onready函數(shù)是否執(zhí)行完必，splice用來刪除隊列中的項目*/
      list[i].end ? list.splice(i--, 1) : list[i]();
    };
    //隊列全部執(zhí)行完成后的清除工作。
    !list.length && stop();
  },
  // 停止所有定時器隊列,釋放內(nèi)存中的引用
  stop = function () {
    clearInterval(intervalId);
    intervalId = null;
  };
  /**
  * 閉包
  * @param:url  圖片的路徑
  * @param:ready 圖片尺寸就緒的回調(diào)函數(shù)
  * @param: load 圖片加載完畢的回調(diào)函數(shù)
  * @param: err 圖片加載出錯的回調(diào)函數(shù)
  *
  */
  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);
    };
  };
})();

標(biāo)簽： Google 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。