【问题标题】：change background image in no time立即更改背景图像
【发布时间】：2015-02-21 14:00:49
【问题描述】：

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

有两张图片

图片1 和图片2

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

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

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

alternate image is class with background-image with image2

但加载 Image2 需要时间。

请告知如何立即加载它

谢谢

【问题讨论】：

一般情况下，把它做成精灵图只是改变背景位置

标签： javascript jquery

【解决方案1】：

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

HTML：

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

CSS：

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

您还可以在页面加载后绑定点击事件（不是在文档准备好时），以使图像完全加载：

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

【讨论】：

是的，我在打字的时候把它打败了。大声笑
我必须用它作为背景图片
您可以将它们用作 css 背景图像。图片应该已经加载了
我尝试过使用假 div 并使用 imag2 将其设置为背景图像并将其设置为无显示，但它根本没有效果
使用 `top: -100000px;` 似乎是个坏主意。请改用display: none。

【解决方案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。从维护的角度来看，这是最困难的解决方案

【讨论】：

【解决方案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..
     });
  });

【讨论】：