Javascript 如何防止背景图像在更改时闪烁

我通过javascript将画布上的重复背景图像应用到div，如下所示：

var img_canvas = document.createElement('canvas');

img_canvas.width = 16;

img_canvas.height = 16;

img_canvas.getContext('2d').drawImage(canvas, 0, 0, 16, 16);

var img = img_canvas.toDataURL("image/png");

document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';

我必须经常更新它。问题是它在变化时会闪烁，这在Chrome中似乎不会发生，但在Firefox和Safari中却非常糟糕。有可能阻止这一切吗？我认为这不会发生，因为它是一个数据URL，因此不需要下载

解决方案：

// create a new Image object
var img_tag = new Image();

// when preload is complete, apply the image to the div
img_tag.onload = function() {

    document.querySelector('#div').style.backgroundImage = 'url(' + img + ')';
}

// setting 'src' actually starts the preload
img_tag.src = img;

---

尝试将此css添加到背景元素：

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

-webkit-transform: translate3d(0, 0, 0);

它应该有助于消除闪烁

您还可以通过将以下内容添加到背景元素来“强制”硬件加速：

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

-webkit-transform: translate3d(0, 0, 0);

---

另一种选择是使用image而不是DIV，并且只更改图像url。

尝试通过将图像包含在DOM中来将图像资源预加载到设备存储中，如下面的HTML代码所示。可能出现错误是因为需要加载图像资源，这需要一些时间（闪烁）

---

像这样预加载图像，无需在

显示中包含
：无

<link rel="preload" href="/images/bg-min.png" as="image">

---

我为此挣扎了一段时间，尝试了预加载、将图像附加到文档中等等

最后，我在没有“渐进”选项的情况下重新保存了JPEG

---

这修复了在更换img src时滚动闪烁的问题。

嘿，伙计们，我知道这是一个老问题，但如果在所有这些之后你仍然闪烁，你可以简单地将最终版本放在背景div后面。闪烁在你当前拥有的图像后面，因此如果它是最终图像，它将是平滑的。

在我的例子中改变

高度：1080px（背景高度）到<代码>高度：适合内容
我认为在任何情况下预加载所有图像都是必要的。我发现浏览器在动态更改背景图像时的行为方式各不相同。例如，在Firefox中，当频繁更改时，它会闪烁，而在Chrome和Safari中则不会

到目前为止，我提出的最好的解决方案是在一个子
画布
中绘制图像，它填充整个父
div
的空间

在所有情况下，您使用的图像都必须进行优化，因为它会影响渲染性能。
谢谢，我首先通过
图像加载了它。我在我的原始问题中编辑了一个这样的例子。被困在这个问题上很久了！这也是一个很容易解决的问题。我希望我可以使用一个精灵图像，但我的图像太大了！再次感谢++我只需要预加载来修复我的闪烁-不需要CSS
可见性
规则。@Air，在移动设备上运行CSS3动画时，您需要向某些元素添加
背面可见性
，以防止闪烁。但这是“资源预加载程序”的另一种情况。不幸的是，它似乎并没有阻止它。我按照建议将其预加载到图像中，从而完全阻止了它。谢谢你的回答。我只需要预加载来修复我的闪烁-不需要CSS
可见性
规则。iphone X上的闪烁和你在div上强制硬件加速的解决方案修复了它。谢谢您的解决方案非常有效。考虑添加一个答案：“我知道这是一个老问题，但是我在Safari上也有同样的问题，即使是用OnToad技巧。最新版本的Safari是否仍适用于您？铬很好。我喜欢这个解决方案！我有257张1700 x 956的图片在我的node webkit应用程序中作为背景图片播放，非常漂亮。默认情况下，NodeWebKit不会播放很多电影；这是可能的，有很多头发拉和网络奇美拉插件。非常感谢你给我指路。这是在4个小时的挫折之后。你把我的生命还给了我。@logidelic你找到解决办法了吗？我在FF和Safari上也遇到了问题。。在Chrome、Edge、IE 11等上工作。工作起来很有魅力！谢谢你！节省了我几个小时的工作。