使用css预加载图像

Question

与html / head中的一些js代码相比，这是预先加载图像的可接受方式吗？

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

js方式

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

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

Answer 1

我认为只要图像不是动态生成的，该方法就可以工作。使用CSS预加载的唯一问题似乎是图像下载与页面，而不是它。您可以在pageload结束后触发JavaScript事件。

进一步阅读：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 2

它背后的概念是将背景图像放置在页面加载但未显示时加载的伪元素上。这会导致浏览器加载图像，以便稍后由另一个元素调用它们时，它们就可以运行了。

这可用于预加载图像并在悬停时交换它们。 “预加载”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/

Answer 3

至少在Firefox上，图像不会被display: none缓存。相反，你可以设置：

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