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

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 + ')');
   }
});

注意:此代码尚未经过充分测试。