Как предотвратить замедление фонового изображения при изменении

Я применяю повторное фоновое изображение с холста к div с помощью javascript следующим образом:

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;

Ответы

Ответ 1

Попробуйте предварительно загрузить ресурс изображения в хранилище устройств, включив изображение в DOM, как в следующем HTML-коде. Возможно, ошибка возникает из-за необходимости загрузки ресурса изображения, который занимает некоторое время (мерцание).

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

Вы можете использовать спрайты-изображения. При использовании спрайтов вашему приложению потребуется меньше HTTP-запросов для загрузки всех ресурсов на вашу страницу. Также добавьте следующие стили CSS, если вы используете css animations. Это предотвратит мигание фона на мобильных устройствах:

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

Ответ 2

Попробуйте добавить этот css в свой фоновый элемент:

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

Это должно помочь с мерцанием.

Вы также можете "принудительно" аппаратное ускорение, добавив это в свой фоновый элемент:

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

Другой вариант - использовать изображение вместо DIV и изменять только URL-адрес изображения.

Ответ 3

Предварительно загрузите свое изображение, не нужно включать <img> с display: none

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

Ответ 4

Я немного боролся с этим, попробовал предварительную загрузку, добавив изображение в документ и т.д.

В конце концов, я сохранил JPEG без опции "Progressive" .

Это фиксировало мерцание мерцания при замене img src.