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

【问题标题】：Changing the background-Image using Jquery causing a flickering kind of effect使用 Jquery 更改背景图像会导致闪烁的效果
【发布时间】：2019-03-03 14:07:26
【问题描述】：

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

   #Sliderimg - height is 500px,

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

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

【问题讨论】：

为什么每次要更新背景图片时都要设置display和z-index属性？最好将 display 和 z-index 属性添加到您的 CSS 中。 z-index:50px 也是无效的。 z-index 采用整数值。
您是否正在预加载您的图片？如果没有，闪烁可能是在浏览器正在下载时。
您可能会发现闪存是在加载新图像时引起的。如果是这种情况，请考虑pre-loading the images.
@Lokase 我无法避免显示属性..
@Grigor 我无法捕获屏幕截图，因为它在几秒钟内发生

标签： javascript jquery css

【解决方案1】：

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

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

【讨论】：

不正确，适当的浏览器会在循环时缓存图像并记住这些图像，与下载延迟作斗争。闪烁来自浏览器重绘项目的方式。
我的问题不在于即将加载的新图像，它对于即将被替换的旧图像闪烁
举一个更具体的例子可能会有所帮助，因为要确切地说明发生了什么有点困难。

【解决方案2】：

也许从您的 z-index 属性中删除“px”？它采用十进制值。

【讨论】：

@ChrisFrancis 谢谢 :) 但没有人对此表示赞赏 :P
我同意你们的观点，我已经更正了，但我仍然有同样的问题

【解决方案3】：

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

这是通过将背景设置为白色然后重新绘制新背景来完成的。

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

【讨论】：

【解决方案4】：

前几天我也遇到了同样的问题。奇怪的是，它在 FF 中似乎还可以，但在 IE、Chrome 和有时 Safari 中会闪烁。解决方案是使用 css sprite sheet。您创建了两个背景彼此相邻的图像。您只显示背景表的一部分。您可以通过调整背景上的边距来切换它。您可以使用 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');
});

【讨论】：