如何測試圖像是否已經在緩存中？

我使用的ColdFusion 10和jQuery 1.7.1和引導。如何測試圖像是否已經在緩存中？

我開發，有很多的主頁上大型，高品質的圖像的網站。在主頁上，有一個圖像旋轉木馬從數據庫中提取十個高質量的圖像。圖像可以是每個1 meg。旋轉木馬圖像不是我的問題（現在），但它與它有關。

我試圖來解決現在的問題是，我使用，我想繼續使用高品質的背景圖片，它是關於180K。如果我在主頁上有緩存的背景，我想使用它。如果沒有，那麼我不想在主頁上使用它。我會從不同的頁面加載它。當用戶返回到主頁，並且背景圖像在緩存中時，我想使用它。

我可以測試圖像是否已經在緩存中，如果是的話，動態加載或不基於該加載？

你可以看到主頁這裏：

http://flyingpiston2012-com.securec37.ezhostingserver.com/

來源

2012-07-06 Evik James

這可能是也可能不是取決於你requre的瀏覽器支持的選項，但你可以使用DataURL其存儲在瀏覽器的localStorage的。

這裏有一個Mozilla文章涉及這個話題：http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

你也應該知道，localStorage的確實有大小限制，我相信這是典型的5MB給定域。這不應該是您的180KB背景圖像的問題，但根據瀏覽器設置和域上的其他頁面/網站，這可能是一個問題。

來源

2012-07-06 18:10:36 STW

我不認爲有測試圖像是否是在你的瀏覽器緩存的方式。

但是，你可以解決這個問題的一種方法是使用jQuery's .load() event。加載圖像時，將圖像ID（或文件名）放入localStorage（或cookie）中。然後您可以測試此變量以查看圖像是否已加載。

設置localStorage的變量爲你的形象的例子：

$(document).ready(function() { 
    $('.hiResImg').load(function() { 
     var imgSrc = $(this).attr('src'); 
     var loadedImgs = localStorage.getItem("loadedImgs"); 

     loadedImgs = loadedImgs || []; 

     loadedImgs.push(imgSrc); 

     localStorage.setItem("loadedImgs", loadedImgs); 
    }); 
});

測試和加載圖像的例子：

$(document).ready(function() { 
    var loadedImgs = localStorage.getItem("loadedImgs").split(','); 

    var imagePath = "http://localhost/path/to/someImg.jpg"; 

    if ($.inArray(imagePath, loadedImgs) > -1) { 
     $('body').css('background-image', 'url(' + imagePath + ')'); 
    } 
});

注：此代碼沒有經過充分測試。

來源

2012-08-14 05:14:20 Russ

這聽起來是個好主意！我想我會繼續採用這種方法。 – 2012-08-14 14:26:06

如何測試圖像是否已經在緩存中？

回答

相關問題