Question

以下是我用于创建滑块的脚本部分，方法是更改每个图像对象的背景图像一段时间。

   #Sliderimg - height is 500px,

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

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

Answer 1

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

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

Answer 2

也许从z-index属性中删除“pic”？它取十进制值。

Answer 3

浏览器被迫重绘整个背景。

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

使用jquery.animate（）来对抗这一点。

Answer 4

前几天我遇到了同样的问题。奇怪的是，它在FF中似乎没问题，但在IE，Chrome和Safari中都会闪烁。解决方案是使用css sprite表。您创建的图像具有彼此相邻的两个背景。您只显示背景表的一部分。您可以通过调整背景上的边距来切换它。您可以使用addClass和removeClass处理边距调整。下面是代码，请看这里的小提琴：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');
});

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

4 个答案: