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>

我如何使用类在div上预加载几个背景图像

3 个答案: