Javascript Girl
  1. Javascript Girl
  3. Comment détecter quand une image a fini de rendre dans le navigateur (c'est-à-dire peint)?
Intereting Posts
Prévention de l'injection SQL dans Node.js L'objet est égal à soi ou à l'objet vide Javascript: calculer x% d'un nombre Queue AJAX appelle Javascript / jQuery: événement de téléchargement de fichier prêt Comment puis-je obtenir un UIWebView pour me concentrer sur une entrée de formulaire et faire apparaître le clavier? Accès à la variable EJS dans la logique Javascript Comment retarder le gestionnaire .keyup () jusqu'à ce que l'utilisateur cesse de taper? Comment vider le contenu d'un div Comment arrêter le bouton arrière du navigateur en utilisant javascript Compter les occurrences / fréquence des éléments du tableau Sélectionnez la case troncant le texte lorsque la taille de la police du corps a changé via javascript sur le document prêt dans IE 9 JavaScript: créer dynamiquement des variables pour les boucles Devrais-je apprendre / devenir compétent en Javascript? JQuery text () et newlines

Comment détecter quand une image a fini de rendre dans le navigateur (c'est-à-dire peint)?

Sur une application Web, je dois travailler avec beaucoup d'images haute résolution, qui sont ajoutées dynamiquement à l'arbre DOM. Ils sont préchargés, puis ajoutés à la page.

C'est une chose à détecter quand une telle image a fini de charger, pour cela j'utilise l'événement de load , mais comment puis-je détecter quand il a fini d'être rendu dans le navigateur, en utilisant Javascript? Lorsque vous travaillez avec des images haute résolution, le processus de peinture actuel peut prendre beaucoup de temps et il est très important de savoir quand il se termine.

J'ai utilisé requestAnimationFrame pour faire le tour. Une fois l'image chargée, elle sera rendue pendant la prochaine image d'animation. Donc, si vous attendez deux images d'animation, votre image sera rendue. 

 function rendered() { //Render complete alert("image rendered"); } function startRender() { //Rendering start requestAnimationFrame(rendered); } function loaded() { requestAnimationFrame(startRender); }

Voir http://jsfiddle.net/4fg3K/1/

De mdn ,

L'événement MozAfterPaint est déclenché lorsque le contenu est repeint à l'écran et fournit des informations sur ce qui a été repeint. Il est principalement utilisé pour étudier l'optimisation des performances

J'espère que vous faites cela pour évaluer les performances de l'image rendue.

Vous avez besoin de l'événement onload sur la <img> . Par exemple: 

 function loadImage () { alert("Image is loaded"); } <img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

la source

Si l'image est l'arrière-plan d'un autre élément, chargez l'image en arrière-plan (avec une requête simple Ajax GET) et lorsque le résultat revient, définissez l'arrière-plan après son chargement.

Mise à jour: ne pas utiliser cette approche – ne fonctionne pas dans les cas où les dimensions de l'image sont définies par rapport à la valeur par défaut

Vous pouvez définir la hauteur de l'élément en auto (avec une largeur fixe) et avec un délai d'attente, vérifiez que les dimensions de l'élément correspondent aux dimensions naturelles de l'image. Ce n'est pas la meilleure solution, mais si vous avez vraiment besoin de faire quelque chose après le rendu et non après le chargement, c'est une bonne option.

Plus ou moins, ça pourrait l'être: 

 //this is NOT a real code function checkIfRendered(img, onRender) { var elRatio = img.width() / img.height(); var natRatio = img.naturalWidth / img.naturalHeight; if (elRatio === natRatio) onRender(); else { setTimeout(function() { checkIfRendered(imgEl, onRender) }, 20); } } img.onload(checkIfRendered(img, function() { alert('rendered!'); }));