jquery - 如何使用类在 div 上预加载多个背景图像

Question

使用 jQuery 在带有类的 div 上预加载背景图像的最佳方法是什么？

<div id="wrapper" class="first">

</div>


.first {background:url(/image.jpg) repeat-x top center}

Answer 1

只需使用 Image 对象或隐藏 DIV 中的 IMG 标签将它们作为常规图像预加载。然后，当您将工作 DIV 的类更改为具有预加载图像之一的 CSS 背景的类时，它将从客户端缓存中提取它。

.preload { display: none; }
...
<div>
    <img src="a.png" class="preload" />
    <img src="b.png" class="preload" />
</div>

Answer 2

如果您希望在不更改 HTML 标记的情况下进行预加载，可以使用 jQuery 执行此操作：

$(function(){
    $('<img/>')[0].src = "/image.jpg";
});

Answer 3

您可以使用整个图像而不是使用多个单独的图像文件，并且可以使用 CSS 背景位置功能的 xpos 和 ypos 参数。在这种情况下，只加载一个图像文件并且一次。让 CSS 和类来处理剩下的事情。这是一个例子；

/*this is the style*/
<style type="text/css">
    .first {
        background: url(.....) no-repeat 0px 0px;
    }
    .second {
        background: url(.....) no-repeat -200px -200px;
    }
</style>
<div id="wrapper" class="first"></div>