javascript - 立即更改背景图像

Question

我正在根据事件更改 div 的背景图片，

有两张图片

图片1 和 图2

我必须根据条件使用这两个图像，它工作正常，但是当我第一次更改图像时，加载需要时间，如何立即加载它

div 将 image1 作为默认背景图像， 我正在用下面的代码改变它

$("div").addClass('loadalternateImage');

备用图像是 background-image 和 image2 的类

但是加载 Image2 需要时间。

请告知如何立即加载

谢谢

Answer 1

您可以在视口(viewport)外的 div 中预加载这两个图像。因此，当您单击以更改背景时，应该已加载两个图像。

HTML:

<div class="img-container">
    <img src="first/img" />
    <img src="second/img" />
</div>

CSS:

.img-container {
    position: fixed;
    top: -100000px;
}

您还可以在页面加载后(不是在文档就绪时)绑定(bind)点击事件，以便图像完全加载:

$(window).load(function() {
     $(document).on('click', '#your-div', function() {
         // change background
     });
});