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

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

像这样预加载图像，无需包含 和 display: none

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

Answer 2

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

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

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

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