Question

我通过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中非常糟糕。有可能阻止这个吗？我认为它不会发生，因为它是一个数据包，因此不需要下载。

解决方案：

// 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;

Answer 1

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

<img src="imageToPreload.png" style="display:none;" alt="" />

您可能更喜欢使用sprites-images。通过使用精灵，您的应用程序将需要更少的HTTP请求来将所有资源加载到您的页面中。如果您使用css animations，还要添加以下CSS样式。它可以防止移动设备上的背景闪烁：

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

Answer 2

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

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

它应该有助于闪烁..

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

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

另一种选择是使用图像而不是DIV并仅更改图像网址。

Answer 3

像这样预加载您的图片，无需在<img>

中添加display: none

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

Answer 4

我挣扎了一下，尝试了预加载，将图像附加到文档等等。

最后，我重新保存了JPEG而没有使用＆＃34; Progressive＆＃34; 选项。

当img src被交换时，它修复了滚动闪烁。

Answer 5

伙计们，我知道这是一个比较老的问题，但是如果您仍然忽悠这一切，您可以将最终版本放到背景div后面。这种闪烁现象是在您当前拥有的图像后面看到的，因此，如果最终的图像将很平滑。

Answer 6

我认为在任何情况下都必须预加载所有图像。我发现，浏览器在动态更改背景图像时的行为方式彼此不同。例如，在Firefox中，当更改频繁时，它会闪烁，但是在Chrome和Safari中，它不会闪烁。

到目前为止，我想到的最好的解决方案是在子canvas内绘制图像，该图像填充整个父div的空间。

在所有情况下，都必须对正在使用的图像进行优化，因为它会影响渲染性能。

如何防止背景图像闪烁变化

6 个答案: