檢查圖像是否從緩存中加載

Question

我有一個任務。我有一個服務器調用來獲取圖像列表。隨着其他信息，我必須添加這些信息，以便從緩存或服務器加載它。

有沒有一種方法可以檢查api調用中的標題？如果它來自緩存，我得到的狀態碼是200，但是我得到了像這樣的額外信息（來自緩存）。如果不是從緩存中我只得到狀態碼200

圖片1是沒有從高速緩存

下一個圖像加載的那些是對於那些從緩存加載。

我得到答案已經給出或者它是重複的。我已經嘗試過這個解決方案，但似乎並不奏效。此外它是鉻特定的，我正在尋找更適合所有瀏覽器的更一般的東西。我希望這解釋了爲什麼我沒有去那個解決方案。在問這裏之前我已經搜查過了。

期待回覆。

Answer 1

您將不得不選擇性地處理加載綁定。您可以通過測試圖像對象屬性complete來驗證加載。

例如：

$('.images_to_load').each(function(index, elem) 
{ 
    if (!elem.complete) { 
     $(elem).on('load', function(){ 
      console.log('image loaded from server'); 
     }); 
    } 
    else { 
     console.log('image loaded from cache'); 
    } 
}); 

如何使用此代碼：你上面的代碼執行時有images_to_load一流的圖像標籤（沒有src屬性），您的網頁上是很重要的。添加src屬性（url）後，您將能夠找出圖像是否已從緩存中加載。