Ich wende ein wiederholtes Hintergrundbild von einer Leinwand über Javascript wie folgt auf ein Div an:

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 ziemlich häufig aktualisieren. Das Problem ist, dass es bei Änderungen flackert. In Chrome scheint es nicht vorzukommen, in Firefox und Safari ist es jedoch sehr schlimm. Kann man das aufhalten? Ich hätte nicht gedacht, dass es passieren würde, da es ein Dataurl ist 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;