有没有办法将图像异步加载到用户的缓存中？

IT技术 javascript html image
2021-02-28 21:36:14

我有一个物品清单。它们中的每一个都是一个带有名称的方块，当用户将鼠标悬停在方块上时，会显示一个图像，这是由 jQuery 完成的。代码是这样的：

$('.square').hover(function() {
  var link = $(this).attr('title');
  $(this).addClass('squarehover')
         .css({backgroundImage: 'url(images/' + escape(link) + '.jpg)'}); 
}, function() {
  $(this).removeClass('squarehover')
         .attr('style', '');   
});

.squarehover {
  font-size: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  -moz-background-size: 100%;
  background-position: center center;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

如果没有事先加载图片，悬停时会有一点延迟。另外，我不想在加载完所有图像后显示页面。

因为图像没有明确显示在页面中，是否可以先加载页面然后开始将图像加载到用户的缓存中（我的想法是用户不会立即将鼠标移动到这些方块上）？如果<img>HTML 中没有标签怎么办？

顺便说一句，既然background-sizeIE8不支持，如何处理？

1个回答

您可以像这样预加载图像：

function preloadImages(srcs) {
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    var img;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.src = srcs[i];
        preloadImages.cache.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];

preloadImages(imageSrcs);

只需填写imageSrcs数组中的 URL并在您的页面首次运行时运行它。您越早运行它，您的图像就越早可用。

仅供参考，这里有一个相关的答案：支持事件的图像预加载器 javascript。

@melanke - 您是否像上面的代码那样保存 JS 图像对象？这些对象就像它们在 DOM 中一样活跃，所以应该没有区别。如果您让垃圾收集器处理 JS 创建的img对象，那么内存不足的浏览器可能会以不同的方式对待它们，但是当图像仍然存在时我不会这么认为。
2021-04-19 21:36:14
如果您不将图像放入页面中，它们稍后将被丢弃在浏览器缓存中（至少在 chrome 中），因此您应该将它们放入 HTML 中，也许使用 display:none
2021-04-21 21:36:14
不应该img.src = srcs[i]吗？
2021-04-26 21:36:14
我有这个问题：如果我在移动设备上，使用 chrome，只在 JS 中加载图像而不将它们放在 html 中，等待一段时间然后将它们放在 HTML 中，它们将不得不再次加载
2021-05-02 21:36:14
@melanke - 图像不需要在页面中。一旦它们被加载到这里，它们将被缓存在浏览器缓存中，就像 DOM 中的任何图像一样。一旦进入缓存，它们将很快加载（不需要网络来获取图像数据）。它们不会永远留在缓存中，但在大多数配置中，它们至少会在缓存中浏览几天。
2021-05-04 21:36:14
其它你可能感兴趣的问题
上一篇d3.js - v3 和 v4 - 输入和更新差异 下一篇使用 Javascript 在 Imacros 中循环