Question

与html / head

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

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

js way

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

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

Answer 1

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

这可用于预加载图像并在悬停时交换它们。＆＃34; preload＆＃34; 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 2

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

进一步阅读：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')
            ...;
}

使用css预加载图像

3 个答案: