css - 使用 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 没有高度/宽度，因为图像设置为背景，因此它不会显示在页面上，当您想要在悬停时交换图像时，图像已准备就绪。 (显然你必须在 anchor 上设置高度/宽度。我只是在这里展示最小的 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/