Как предотвратить мерцание фонового изображения при изменении
Я применяю повторное фоновое изображение из холста в 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;