Comment empêcher l'image d'arrière-plan de scintiller lors d'un changement

Question

J'ai appliqué une image d'arrière-plan répétitive du canevas au div via JavaScript comme ceci :

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

Je dois le mettre à jour souvent. Le problème est qu'il scintille lors des changements, ce qui ne semble pas se produire dans Chrome, mais est vraiment mauvais dans Firefox et Safari. Est-il possible d'empêcher cela ? Je ne pense pas que cela se produise puisqu'il s'agit d'une dataurl et n'a donc pas besoin d'être téléchargée.

Solution :

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

Préchargez des images comme celle-ci, pas besoin de les inclure 和 display: none

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

Answer 2

Essayez de précharger les ressources d'image dans le stockage de l'appareil en incluant l'image dans le DOM, comme indiqué dans le code HTML suivant. L'erreur peut se produire car la ressource image doit être chargée, ce qui prend un certain temps (scintillement).

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

Vous préférerez peut-être utiliser sprites-images. En utilisant des sprites, votre application nécessitera moins de requêtes HTTP pour charger toutes les ressources dans votre page. Si vous utilisez css 动画, veuillez également ajouter les styles CSS suivants. Cela empêchera le scintillement de l'arrière-plan sur les appareils mobiles : 

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