Question

我有几个连续的图像作为div的背景图像。

假设这些图像是不同水位的瓶子里的水，我想逐个改变这些图像，看起来水看起来很慢。

我将图像放在几个CSS类中并在更改图像时：

.waterLevel1 {
    background: url(path/to/my/image);
}

我使用了与以下内容类似的代码：

$('#myDiv').addClass('waterLevel2').removeClass('waterLevel1');

它确实适用于更改图像，但有时会在更改之间闪烁。

有没有办法避免眨眼？

更新

图像已经是gif图片，所以只需更换它们即可。

我现在没有这些照片，对不起jsfiddle。

Answer 1

简单的解决方案是使用多个divs。然后只需更改显示屏

<div class="waterLevelWrapper">
    <div class="waterLevel waterLevel1" style="display:block;"></div>
    <div class="waterLevel waterLevel2" style="display:none;"></div>
    <div class="waterLevel waterLevel3" style="display:none;"></div>
    <div class="waterLevel waterLevel4" style="display:none;"></div>
    <div class="waterLevel waterLevel5" style="display:none;"></div>
</div>

将.waterLevelWrapper设置为您想要的尺寸并设置postion:relative。然后调整.waterLevel的大小以填充包装器并设置为position:absolute。

现在，您可以根据需要循环浏览并隐藏/显示每个div。

Answer 2

首先预加载背景图片。

// put this in a javascript file, preferably before the closing </body> tag.
(function(){
    var imgPathArr = ["/path/to/image.jpg","/path/to/another/image.jpg"], i, img;
    for (i = 0; i < imgPathArr.length; i++) {
        img = new Image();
        img.src = imgPathArr[i];
    }
})();

现在，当您切换类时，它应该是即时的，因为它不再需要下载图像来进行交换。

如何在不闪烁的情况下无缝更改背景图像？

2 个答案: