如何测试图像是否已经在缓存中？

我使用的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

如何测试图像是否已经在缓存中？

回答

相关问题