立刻改变背景图像

Question

我正在基于事件更改div的背景图片，

有两张图片

IMAGE1 和 图像2

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

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

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

替代图像是带有image2的背景图像的类

但加载Image2需要一些时间。

请告知如何立即加载

由于

Answer 1

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

HTML：

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

CSS：

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

您还可以在页面加载后绑定click事件（而不是文档就绪），以便图像完全加载：

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

Answer 2

选项1

我建议你看一下this post

因此，您可以对图片使用base64编码并将其直接放入样式表：

loadalternateImage { 
  background: url(data:image/gif;base64,....) no-repeat left center;
}

选项2

或者，你可以将它放入一些不可见的节点，这也会触发预加载：

<img src="original.jpg">
<img src="secondary.jpg" style="display:none;">

选项3

使用精灵 - 看看this post。从维护的角度来看，这是最困难的解决方案

Answer 3

好的，保留@kapantzak的答案，但这样做

在

之间切换

$("#imgBackground')[0].src = $("#firstImg")[0].src

and

$("#imgBackground')[0].src = $("#secondImg")[0].src

imgBackground是IMG标记的id作为你的背景。

 //Code block from @kapantzak
 $(window).load(function() {
     $(document).on('click', '#your-div', function() {
        // put the code above here..
     });
  });