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

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中确实很糟糕.有可能阻止这个吗？我认为它不会发生,因为它是一个dataurl,因此不需要下载.

解:

// 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="" />

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

-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并仅更改图像URL。

Answer 3

像这样预加载您的图像，无需包含<img>withdisplay: none

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