So verhindern Sie, dass das Hintergrundbild beim Ändern flackert

Question

Ich habe über JavaScript ein sich wiederholendes Hintergrundbild von der Leinwand auf das Div angewendet, etwa so:

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 + ')';

Ich muss es oft aktualisieren. Das Problem besteht darin, dass es bei Änderungen flackert, was in Chrome scheinbar nicht vorkommt, in Firefox und Safari jedoch sehr schlimm ist. Kann man das verhindern? Ich glaube nicht, dass dies geschieht, da es sich um eine Daten-URL handelt und daher nicht heruntergeladen werden muss.

Lösung:

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