Firefox中的skrollr背景图像闪烁

Question

我有一个带背景图像的div。 使用skrollr，我正在更改背景图像，得到一种动画效果（折叠纸张airplaine）。 为了防止插值，我使用了自定义缓动函数：

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的选项来防止插值。 已经检查了我的缓动功能，它应该可以正常工作。 在萤火虫中，我可以观察到背景图像正在按需更改。 还是我忽隐忽现。

Answer 1

我对Skrollr并不熟悉，但是我一直在研究类似的情况，当交换它们时，图像会闪烁。

我对此问题的理解是，Firefox不会在第一次查看图像之前对其进行解码，而您所看到的闪烁是试图在解码准备就绪之前显示的图像。 加载图像与解码是分开的，因此这就是为什么预加载对于Firefox在此问题上没有影响的原因。

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

我发现了一些Bugzilla案例，我相信与该问题有关：

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