使用Jquery更改背景图像会导致闪烁效果的问题

Question

以下是我使用的脚本部分，通过更改每个图像对象的背景图像来创建一个滑块，循环一段时间。

   #Sliderimg - height is 500px,

   $("#Sliderimg").css({
        "background-image": "url(../Images/" +SliderImageObj.image + ")",
        "display": "block",
        "z-index": "50px"
    });

每次更改图片时，我遇到了闪烁现象，可能出了什么问题？我的问题不是与即将加载的新图片有关，而是旧图片在即将替换时会出现闪烁（在屏幕底部闪烁）。

- user824910

---

为什么每次更新背景图片时都要设置显示和z-index属性？最好将显示和z-index属性移到CSS中。另外，z-index:50px是无效的。z-index需要一个整数值。 - Lowkase

你是否预加载了图片？如果没有，那么在浏览器下载时可能会出现闪烁。 - chrisfrancis27

如果新图像正在加载时出现闪烁，请考虑预加载图像。 - Matt

@Lokase 我无法避免使用 display 属性。 - user824910

@Grigor 我无法抓取屏幕截图，因为它在几秒钟内迅速发生。 - user824910

Answer 1

你看到闪烁是因为每次更改背景图像时，浏览器必须先下载它才能显示背景。如果图像不太大（超过5kb），您可以尝试将它们缓存到浏览器中，方法是将它们应用于不会显示的元素。

此外，50px不是有效的z-index值，该属性仅接受整数。

- davethegr8

---

不是这样的，一个合适的浏览器会在循环时缓存图像并记住它们，以对抗下载延迟。闪烁来自于浏览器重新绘制项目的方式。 - Tschallacka

我的问题不在于即将加载的新图像，而是关于即将被替换的旧图像闪烁的问题。 - user824910

可能提供一个更具体的例子会有所帮助，因为现在很难确切地了解正在发生什么。 - davethegr8

Answer 2

也许从你的 z-index 属性中删除 "px"？它可以使用小数值。

- Mateusz Rogulski

---

@ChrisFrancis 谢谢 :) 但是没有人欣赏 :P - Mateusz Rogulski

我同意你们的观点，我已经进行了更正，但是问题仍然存在。 - user824910

Answer 3

浏览器被强制重新绘制整个背景。

实现这一点的方法是将背景设置为白色，然后重新绘制新的背景。

使用jquery.animate()来解决这个问题。

- Tschallacka

Answer 4

我前几天遇到了同样的问题。奇怪的是，在Firefox中似乎没有问题，但在IE、Chrome和有时Safari中会闪烁。解决方案是使用CSS精灵表。您可以创建一个图像，将两个背景放在一起。您只显示背景表的一部分。通过调整背景的边距来切换它。您可以使用addClass和removeClass处理边距调整。以下是代码，单击此处查看fiddle:http://jsfiddle.net/fMhMY/

CSS

.navButton span{
width:32px;
height:32px;
display:block;
}

a.leftButton span, a#leftButton span{
background-image:url(Prev.png);
background-position:-64px 0px;
}

/*nav button sprites */

/*sprite order is pushed, hover, natural */

a.leftButton.navOver span, a.rightButton.navOver span{
background-position:-32px 0px;
}

a.leftButton.navPressed span, a.rightButton.navPressed span{
background-position:0px 0px;
}

HTML

<div style='display:inline-block'>
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'>
        <span></span>
    </a>
</div>

jQuery

$('.leftButton').mousedown(function() {

        $('.leftButton').addClass('navPressed');
        console.log('mousedown');

});
$('.leftButton').mouseup(function() {
        $('.leftButton').removeClass('navPressed');
        console.log('mouseup');
});

$('.leftButton').hover(function() {
        $('.leftButton').addClass('navOver');
        console.log('hover');
});


$('.leftButton').mouseout(function() {
        $('.leftButton').removeClass('navPressed').removeClass('navOver');
        console.log('mouseout');
});

- chiliNUT