3

我正在使用 ColdFusion 10 和 jQuery 1.7.1 和 Bootstrap。

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

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

我可以测试图像是否已经在缓存中，如果是，动态加载还是不加载？

您可以在此处查看主页：

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

2 回答 2

1

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

但是，解决这个问题的一种方法是使用jQuery 的 .load() 事件。加载图像时，将图像 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-14T05:14:20.147 回答
0

它可能是也可能不是一个选项，具体取决于您需要的浏览器支持，但您可以使用 DataURL 将其存储在浏览器的 localStorage 中。

这是一篇涵盖此主题的 Mozilla 文章：http: //hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

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

于 2012-07-06T18:10:36.830 回答