Question

我使用的是ColdFusion 10和jQuery 1.7.1以及Bootstrap。

我正在开发一个在主页上有大量高质量图像的网站。在主页上，有一个图像轮播，从数据库中提取十个高质量的图像。图像可以是每个1兆。旋转木马图像不是我的问题（现在），但它与它有关。

我现在要解决的问题是我使用的是高质量的背景图像，我想继续使用，它大约是180k。如果我在主页上有缓存的背景，我想使用它。如果没有，那么我不想在主页上使用它。我将从另一个页面加载它。当用户返回主页，背景图像在缓存中时，我想使用它。

我可以测试一个图像是否已经存在于缓存中，如果是，则根据它动态加载或不加载？

您可以在此处查看主页：

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

Answer 1

我认为没有办法测试图像是否在浏览器缓存中。

但是，解决此问题的一种方法是使用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 + ')');
   }
});

注意：此代码尚未经过全面测试。

Answer 2

根据您所需的浏览器支持，它可能是也可能不是一个选项，但您可以使用DataURL将其存储在浏览器的localStorage中。

以下是关于此主题的Mozilla文章：http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

您还应该知道localStorage确实有一个大小限制，我认为对于给定的域通常是5MB。这不应该是您的180KB背景图片的问题，但根据浏览器设置和域上的其他页面/网站，它可能是一个问题。

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

2 个答案: