skrollr背景图像在Firefox中闪烁

skrollr background image flicker in Firefox

本文关键字：闪烁 Firefox 背景 图像 skrollr      更新时间：2023-11-18

我有一个带有背景图像的div。使用skrollr，我改变了背景图像，得到了一种动画（纸上的Airlaine折叠起来）。为了防止插值，我使用了一个自定义的宽松函数：

easeInt: function(p) {
   return Math.floor(p * 13) / 13;
}

我的动画如下（skrollr样式表）：

3528 {
    background-image[easeInt]: url("img/plane14/plane0.png");
}
3928 {
    background-image[easeInt]: url("img/plane14/plane13.png");
}

动画运行时，背景图像会在下一个图像出现之前消失一段时间，从而导致动画闪烁。这个问题只出现在Firefox中，而没有出现在Chrome或Safari中。我正在使用预加载所有图像

var img1 = new Image(); img1.src = 'img/plane14/plane1.png';

使用HTML预加载所有图像也没有完成任务：

<div style="width:100px; height:100px; position: fixed; top: -100px; left: -100px;">
<!-- loading all images as <img src="imageurl.png"> -->
</div>

我还尝试使用skrollr的选项来阻止插值。已经检查了我的放松功能，它应该能正常工作。在firebug中，我可以观察到背景图像正在根据需要进行更改。但我还是有这种闪烁的感觉。

我不熟悉Skrollr，但我一直在研究类似的情况，即图像在交换时会闪烁。

我对这个问题的理解是，Firefox在第一次观看图像之前不会对图像进行解码，而你看到的闪烁是在解码准备好之前试图显示的图像。加载图像与解码是分开的，所以预加载对Firefox的这个问题没有影响。

如果你在Firefox中转到about:config，可以更改设置image.decode-immediately.enabled，这应该可以在本地解决问题。不幸的是，我没有找到更好的方法来解决这个问题。

我发现了几个bugzilla案例，我认为它们与这个问题有关：

https://bugzilla.mozilla.org/show_bug.cgi?id=1149893

https://bugzilla.mozilla.org/show_bug.cgi?id=1158440

相关文章：