使用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

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

这可用于预加载图像并在悬停时交换它们."预加载"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 预加载的唯一问题似乎是图像与页面一起下载，而不是在页面之后下载。您可以在页面加载结束后触发 JavaScript 事件。

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