Javascript Firefox中的skrollr背景图像闪烁

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

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

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

动画运行时，背景图像会在下一个图像出现之前消失一段时间，导致动画闪烁。这个问题只会出现在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-installent.enabled，这将在本地解决问题。不幸的是，我还没有找到更好的方法来解决这个问题

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

另一个bugzilla链接：。这一个有一个建议的解决办法，要么在其他元素后面预加载图像，要么将它们绘制到画布对象。

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