獲取javascript預載圖像的大小

我正嘗試將服務器上生成的一些圖像預加載到一個小網站。使用setWindowTimeout完成預加載並使用Image對象，設置onload回調，然後應用新請求uri。獲取javascript預載圖像的大小

對於某些請求，服務器可能不得不發信號通知圖像是'未更改'，而我通過發送一個小的1x1像素gif來做到這一點（似乎我需要發送實際圖像，返回空的內容將導致Image對象不會觸發onload）。在我的onload處理程序中，我想確定提取的圖像的大小，然後確定是否應該用給定的圖像更新可視圖像。

下面是我目前的解決方案的片段（輸出是一個div來幫助調試）：

 refresh: function() { 
     var newSrc = '/screenshot.ashx?tick=' + new Date().getTime(); 
     var imgObj = new Image(); 
     var self = this; 

     // this is called when load is done 
     imgObj.onload = function() { 
      //if (imgObj.complete) 
      // return; 
      if (imgObj.width > 1 && imgObj.height > 1) { 
       output.innerHTML += '<br/>Updating image:' + newSrc; 
       img.src = newSrc; //fiddler shows no reload here, read from cache 
      } 
      else { 
       output.innerHTML += '<br/>Empty image:' + newSrc; 
      } 
      self.setupNewRefresh(); 
     }; 

     output.innerHTML += '<br/>Loading image:' + newSrc; 
     imgObj.src = newSrc; 
    },

我似乎有兩個問題：

一）imgObj.complete是假的時該函數首先調用但它僅調用一次（因此我的評論吧）和

b）我似乎無法加載時依賴於圖像的寬度或高度屬性。從我獲取1x1像素的測試中，它有時會讀出50，這在創建新圖像時似乎是默認值（），有時會讀出正確的大小1.

我的最終目標是有一個小塊定期向服務器查詢新圖像的javascript邏輯，如果沒有發生新的事情（1像素圖像）或加載新圖像，則不執行任何操作。我可能會在這裏以錯誤的方式進行討論，或者忽略了重要的屬性或通話，所以我很樂意收到反饋。

編輯：在從mplungjan建議，我預裝在一個隱藏的div來代替，這讓我有問題，B）。仍然沒有解決問題a）雖然;報告的完整=假一次，不再調用

來源

2010-07-22 soren.enemaerke

似乎你真的需要將圖像加載到DOM來查看實際大小。我用一個隱藏的div來做到這一點。 – mplungjan 2010-07-22 13:28:26

您在加載調用時給src屬性一個值...（img.src = newSrc;）我不認爲那是必需的。當圖像存在時，它會自動從緩存中重新加載。將其留給瀏覽器。 – foxybagga 2012-01-03 05:21:55

我會繼續前進，回答我的問題。

預加載圖像到在DOM，而不是代碼級元素，一個隱藏的元素是爲實際得到正確的尺寸（感謝mplungjan）的伎倆。 a）問題，即完整事件，仍未解決。

作爲一個方面說明我結束了使用，而不是因爲它允許通過看返回的有效載荷的大小了XMLHttpRequest。

來源

2010-07-26 09:20:13

獲取javascript預載圖像的大小

回答

相關問題