Firefox中的skrollr背景图像闪烁答案

【问题标题】：skrollr background image flicker in FirefoxFirefox中的skrollr背景图像闪烁
【发布时间】：2015-11-13 07:06:13
【问题描述】：

我有一个带有背景图片的 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 的防止插值选项。已经检查了我的缓动功能，它应该可以正常工作。在萤火虫中，我可以观察到背景图像正在根据需要进行更改。我仍然得到这个闪烁。

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

另一个 bugzilla 链接：bugzilla.mozilla.org/show_bug.cgi?id=705826。这有一个建议的解决方法，即在其他元素后面预加载图像或将它们绘制到画布对象。