如何防止背景影像在變更時閃爍

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;