web-dev-qa-db-fra.com

En attente de chargement de l'image en Javascript

Je passe un appel Ajax qui me renvoie des informations, y compris un chemin d’image ..__, je prépare toutes ces informations dans mon code HTML qui sera affiché comme une sorte de popup. Je viens de basculer la visibilité de popup div de masqué à visible.

Pour définir la position de mon popup popup, je dois calculer en fonction de la hauteur de l'image ..__ Donc, je dois attendre que l'image se charge pour connaître sa dimension avant de définir la position et de basculer la visibilité sur visible.

J'ai essayé des astuces avec la récursivité, setTimeout, la propriété complète img, en boucle ... sans succès.

Alors, comment puis-je faire cela. Peut-être que je devrais renvoyer des dimensions dans mon appel Ajax.

javascriptimageloadwait
50
Jeenyus
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Notez qu'il est important de le faire dans l'ordre ci-dessus: Tout d'abord attachez le gestionnaire, puis définissez la src. Si vous le faites à l'inverse et que l'image est en cache, vous risquez de rater l'événement. JavaScript est exécuté sur un seul thread dans les navigateurs (sauf si vous utilisez des travailleurs Web), mais browsers ne sont pas à un seul thread. Il est parfaitement valide pour le navigateur de voir la src, d’identifier la ressource disponible, de la charger, de déclencher l’événement, de regarder l’élément pour voir s’il possède des gestionnaires devant être mis en file d'attente pour le rappel, de n'en voir aucun traitement des événements, le tout entre la ligne src et la ligne reliant le gestionnaire. (Les rappels ne se produiraient pas entre les lignes s'ils étaient enregistrés, ils attendraient dans la file d'attente, mais s'il n'y en avait pas, l'événement n'est pas obligé d'attendre.)

99
Josh Stodola

Si vous utilisez jQuery, vous pouvez utiliser son événement load .

Regardez l'exemple:

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});
10
Sagi

J'avais une image captcha lente (1st_image) chargée sur ma page et je voulais afficher une autre image (2nd_image) seulement APRÈS que l'image captcha (1st_image) soit chargée . J'ai donc dû attendre que l'image captcha (1st_image) soit charger en premier.

Voici la solution qui fonctionne parfaitement pour attendre qu'une image se charge en premier, puis pour charger une autre image: (N'oubliez pas d'afficher une image "veuillez patienter!" Pendant qu'ils attendent qu'une autre image soit chargée)

<script>
function checkImageLoad() {
    if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");}
    document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png";
}
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://domain.com/1st_image.png">
<img id="2nd_image" src="http://domain.com/loading_please_wait.gif">

Soit la vitesse de l’Internet est lente ou rapide, le navigateur attendra que la page entière soit chargée avec toutes les images (même si elles sont liées de manière externe), puis exécute la fonction. La deuxième image ne sera affichée qu’après le chargement correct de la 1ère image.

Avancé Remarque: vous pouvez utiliser une URL de page Web dans le "src" de l'image pour charger une page Web en premier, puis afficher l'image. Le but est de charger le cookie à partir de la page Web externe, ce qui pourrait affecter la deuxième image affichée (comme captcha)

0
Tarik