Question

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

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

我的动画看起来像这样（skrollr-stylesheet）：

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案例：