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

下面是脚本的一部分，我正在使用它通过在一个时间周期内更改每个imageobject的背景图像来创建滑块

   #Sliderimg - height is 500px,

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

---

当我每次更改图像时都会出现闪烁效果时，我的问题不在于即将加载的新图像，而在于即将被替换的旧图像的闪烁（在屏幕底部闪烁）。

可能会从z-索引中删除“px”？它采用十进制值。

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

---

此外，50px不是有效的z索引，该属性只需要整数。

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

如何做到这一点是通过设置背景为白色，然后重新绘制新的背景

---

使用jquery.animate（）来解决这个问题。

前几天我也遇到了同样的问题。奇怪的是，它在FF中似乎还可以，但在IE、Chrome和Safari中会闪烁。解决方案是使用css精灵表。创建一个两个背景相邻的图像。您仅显示背景工作表的一部分。您可以通过调整背景上的边距来切换它。您可以使用addClass和removeClass处理边距调整。下面是代码，请参见此处查看小提琴：

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>

---

为什么每次要更新背景图像时都要设置“显示”和“z索引”属性？最好将显示和z索引属性保存到CSS中。此外，z-index:50px无效。z索引采用整数值。是否预加载图像？如果没有，闪烁可能是在浏览器下载时发生的。您可能会发现闪烁是在加载新图像时引起的。如果是这样的话，请考虑@ Lokasi我无法避免显示属性。@ Grigor，我不能捕捉屏幕截图，因为它是在闪光灯中发生的。seconds@ChrisFrancis谢谢：）但没人欣赏：我同意你们的观点，我已经纠正了，但我仍然有同样的问题不是真的，一个合适的浏览器将在循环时缓存图像并记住这些图像，以应对下载延迟。闪烁来自浏览器重新绘制项目的方式。我的问题不在于即将加载的新图像，而在于即将被替换的旧图像的闪烁。这可能有助于提供一个更具体的示例，因为要准确地判断到底发生了什么有点困难。

$('.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');
});