使用CSS预加载图片

Question

与在HTML/HEAD内部放置一些JS代码相比，这种预加载图像的方式是否可接受?

body:after{
    display:none;
    content:
    url(img1.jpg)
    url(img2.jpg)
    ...
}

JavaScript方法

$.preload = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preload("img1.jpg","img2.jpg");

- qadenza

---

很好，你在问题中比较了CSS和JS的预加载方法。我正在使用一些动态生成的HTML片段中的图像，并且刚刚发现对于我来说CSS预加载程序是获取缓存图像的正确方式。 - deblocker

你的CSS方法对我很有效，谢谢。 - Liran H

Answer 1

这个概念是将背景图像放置在一个伪元素上，该元素在页面加载时被加载但不显示。这会导致浏览器加载图像，以便当它们被另一个元素调用时，它们已经准备好了。

这可以用于预加载图像并在悬停时交换它们。 "preload" div没有高度/宽度，因为图像设置为背景，所以它不会显示在页面上，并且当您想要在悬停时交换它们时，图像已经准备好了。（您显然必须在锚点上设置高度/宽度。我只是展示最少的CSS来传达重点）

HTML:

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="button-1"></a>
    <a href="http://..." class="button-2"></a>
    <a href="http://..." class="button-3"></a>
</div>

CSS:

#preload  {background: url('pic1b.png'), url('pic2b.png'), url('pic3b.png');}
.button-1 {background: url('pic1a.png');}
.button-2 {background: url('pic2a.png');}
.button-3 {background: url('pic3a.png');}
.button-1:hover {background: url('pic1b.png');}
.button-2:hover {background: url('pic2b.png');}
.button-3:hover {background: url('pic3b.png');}

显然，还有许多其他方法，上面的帖子分享了一个链接，其中包括许多其他方法。 http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

- imbondbaby

---

为什么要使用 display:inline？这不是默认值吗？还有，为什么要使用 width:0 和 height:0？使用 display:none 不是更好吗？ - qadenza

“preload” div没有高度/宽度，因为图像设置为背景，所以它不会显示在页面上，并且当您想要在悬停时交换它们时，图像已经准备好了。 - imbondbaby

我已经发布了一个很好的例子，请告诉我它是否有帮助。 - imbondbaby

是的，你的努力对我非常有用，我已经点赞了，非常感谢。但是我已经接受了ndm13的答案。 - qadenza

Answer 2

我认为这种方法是可行的，只要图像不是动态生成的。使用CSS预加载的唯一问题似乎是图像会随着页面一起下载，而不是在页面之后。您可以在页面加载完成后触发JavaScript事件。

更多阅读：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

- ndm13

---

谢谢，你的链接对我非常有用。 - qadenza

Answer 3

在 Firefox 上，使用 display: none 无法缓存图片。相反，您可以设置：

body:after {
width: 0; height: 0; overflow: hidden; display: block;
content:    url('img1')
            url('img2')
            ...;
}

- bur