[轉]js動態獲取圖片長寬尺寸

http://blog.phpdr.net/js-get-image-size.htmljavascript

lightbox類效果爲了讓圖片居中顯示而使用預加載，須要等待徹底加載完畢才能顯示，體驗不佳（如filick相冊的全屏效果）。javascript沒法獲取img文件頭數據，真的是這樣嗎？本文經過一個巧妙的方法讓javascript獲取它。php

這是大部分人使用預加載獲取圖片大小的例子：html

 
      01 
      var imgLoad = function (url, callback) { 
     
      02 
          var img = new Image(); 
     
      03 
        
      04 
          img.src = url; 
     
      05 
          if (img.complete) { 
     
      06 
              callback(img.width, img.height); 
     
      07 
          } else { 
     
      08 
              img.onload = function () { 
     
      09 
                  callback(img.width, img.height); 
     
      10 
                  img.onload = null; 
     
      11 
              }; 
     
      12 
          }; 
     
      13 
        
      14 
      };

能夠看到上面必須等待圖片加載完畢才能獲取尺寸，其速度不敢恭維，咱們須要改進。java

web應用程序區別於桌面應用程序，響應速度纔是最好的用戶體驗。若是想要速度與優雅兼得，那就必須提早得到圖片尺寸，如何在圖片沒有加載完畢就能獲取圖片尺寸？web

十多年的上網經驗告訴我：瀏覽器在加載圖片的時候你會看到圖片會先佔用一塊地而後才慢慢加載完畢，而且不須要預設width與height屬性，由於瀏覽器可以獲取圖片的頭部數據。基於此，只須要使用javascript定時偵測圖片的尺寸狀態即可得知圖片尺寸就緒的狀態。瀏覽器

固然實際中會有一些兼容陷阱，如width與height檢測各個瀏覽器的不一致，還有webkit new Image()創建的圖片會受以處在加載進程中同url圖片影響，通過反覆測試後的最佳處理方式：緩存

 
      01 
      // 更新： 
     
      02 
      // 05.27: 一、保證回調執行順序：error > ready > load；二、回調函數this指向img自己 
     
      03 
      // 04-02: 一、增長圖片徹底加載後的回調 二、提升性能 
     
      04 
        
      05 
      /** 
     
      06 
       * 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸 
     
      07 
       * @version 2011.05.27 
     
      08 
       * @see     http://blog.phpdr.net/js-get-image-size.html 
     
      09 
       * @param   {String}    圖片路徑 
     
      10 
       * @param   {Function}  尺寸就緒 
     
      11 
       * @param   {Function}  加載完畢 (可選) 
     
      12 
       * @param   {Function}  加載錯誤 (可選) 
     
      13 
       * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { 
     
      14 
              alert('size ready: width=' + this.width + '; height=' + this.height); 
     
      15 
          }); 
     
      16 
       */ 
     
      17 
      var imgReady = (function () { 
     
      18 
          var list = [], intervalId = null, 
     
      19 
        
      20 
          // 用來執行隊列 
     
      21 
          tick = function () { 
     
      22 
              var i = 0; 
     
      23 
              for (; i < list.length; i++) { 
     
      24 
                  list[i].end ? list.splice(i--, 1) : list[i](); 
     
      25 
              }; 
     
      26 
              !list.length && stop(); 
     
      27 
          }, 
     
      28 
        
      29 
          // 中止全部定時器隊列 
     
      30 
          stop = function () { 
     
      31 
              clearInterval(intervalId); 
     
      32 
              intervalId = null; 
     
      33 
          }; 
     
      34 
        
      35 
          return function (url, ready, load, error) { 
     
      36 
              var onready, width, height, newWidth, newHeight, 
     
      37 
                  img = new Image(); 
     
      38 
        
      39 
              img.src = url; 
     
      40 
        
      41 
              // 若是圖片被緩存，則直接返回緩存數據 
     
      42 
              if (img.complete) { 
     
      43 
                  ready.call(img); 
     
      44 
                  load && load.call(img); 
     
      45 
                  return; 
     
      46 
              }; 
     
      47 
        
      48 
              width = img.width; 
     
      49 
              height = img.height; 
     
      50 
        
      51 
              // 加載錯誤後的事件 
     
      52 
              img.onerror = function () { 
     
      53 
                  error && error.call(img); 
     
      54 
                  onready.end = true; 
     
      55 
                  img = img.onload = img.onerror = null; 
     
      56 
              }; 
     
      57 
        
      58 
              // 圖片尺寸就緒 
     
      59 
              onready = function () { 
     
      60 
                  newWidth = img.width; 
     
      61 
                  newHeight = img.height; 
     
      62 
                  if (newWidth !== width || newHeight !== height || 
     
      63 
                      // 若是圖片已經在其餘地方加載可以使用面積檢測 
     
      64 
                      newWidth * newHeight > 1024 
     
      65 
                  ) { 
     
      66 
                      ready.call(img); 
     
      67 
                      onready.end = true; 
     
      68 
                  }; 
     
      69 
              }; 
     
      70 
              onready(); 
     
      71 
        
      72 
              // 徹底加載完畢的事件 
     
      73 
              img.onload = function () { 
     
      74 
                  // onload在定時器時間差範圍內可能比onready快 
     
      75 
                  // 這裏進行檢查並保證onready優先執行 
     
      76 
                  !onready.end && onready(); 
     
      77 
        
      78 
                  load && load.call(img); 
     
      79 
        
      80 
                  // IE gif動畫會循環執行onload，置空onload便可 
     
      81 
                  img = img.onload = img.onerror = null; 
     
      82 
              }; 
     
      83 
        
      84 
              // 加入隊列中按期執行 
     
      85 
              if (!onready.end) { 
     
      86 
                  list.push(onready); 
     
      87 
                  // 不管什麼時候只容許出現一個定時器，減小瀏覽器性能損耗 
     
      88 
                  if (intervalId === null) intervalId = setInterval(tick, 40); 
     
      89 
              }; 
     
      90 
          }; 
     
      91 
      })();

調用例子：函數

 
      1 
      imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { 
     
      2 
          alert('size ready: width=' + this.width + '; height=' + this.height); 
     
      3 
      });

Demo 性能

（經過測試的瀏覽器：Chrome、Firefox、Safari、Opera、IE六、IE七、IE8）測試

轉自 http://www.planeart.cn/?p=1121