Vérifier si une image est chargée (sans erreur) avec jQuery

Question

J'utilise JavaScript avec la bibliothèque jQuery pour manipuler des vignettes d'images contenues dans une liste non ordonnée. Lorsque l'image est chargée, elle fait une chose, lorsqu'une erreur se produit, elle fait autre chose. J'utilise jQuery load() y error() comme des événements. Après ces événements, je vérifie l'élément DOM de l'image pour le .complete afin de m'assurer que l'image n'était pas déjà chargée avant que jQuery puisse enregistrer les événements.

Il fonctionne correctement, sauf lorsqu'une erreur se produit avant que jQuery puisse enregistrer les événements. La seule solution qui me vient à l'esprit est d'utiliser la fonction img. onerror pour stocker un "drapeau" quelque part dans le monde (ou sur le nœud lui-même) qui indique que l'opération a échoué, de sorte que jQuery puisse vérifier ce "magasin/nœud" lors de la vérification de .complete.

Quelqu'un a-t-il une meilleure solution ?

Edition : Les points principaux ont été mis en gras et des détails supplémentaires ont été ajoutés ci-dessous : Je vérifie si une image est complète (c'est-à-dire chargée) APRÈS avoir ajouté un événement de chargement et d'erreur sur l'image. De cette façon, si l'image a été chargée avant l'enregistrement des événements, je le saurai quand même. Si l'image n'est pas chargée après les événements, ces derniers s'en chargeront quand elle le sera. Le problème, c'est que je peux facilement vérifier si une image est déjà chargée, mais Je ne peux pas dire si une erreur s'est produite à la place.

Answer 1

Vérifiez le complete y naturalWidth les propriétés, dans cet ordre.

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

Answer 2

Une autre option consiste à déclencher le onload et/ou onerror en créant un élément d'image dans la mémoire et en définissant son src à l'attribut original src de l'image originale. Voici un exemple de ce que je veux dire :

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

J'espère que cela vous aidera !

Answer 3

J'ai essayé de nombreuses façons différentes et cette façon est la seule qui a fonctionné pour moi.

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

Vous pouvez également ajouter une fonction de rappel déclenchée une fois que toutes les images sont chargées dans le DOM et prêtes. Cela s'applique également aux images ajoutées dynamiquement. http://jsfiddle.net/kalmarsh80/nrAPk/

Answer 4

Utilice imagesLoaded bibliothèque javascript .

Utilisable avec le simple Javascript et comme plugin jQuery.

Caractéristiques :

• officiellement supporté par IE8+
• licence : MIT
• dépendances : aucune
• poids (minifié et gzippé) : 7kb minifié (léger !)

Ressources

• Projet sur github : https://github.com/desandro/imagesloaded
• Site web officiel : http://imagesloaded.desandro.com/
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• Bibliothèque javascript chargée d'images : quel est le support du navigateur et du dispositif ?

Answer 5

Voici comment j'ai réussi à le faire fonctionner sur plusieurs navigateurs en utilisant une combinaison des méthodes ci-dessus (j'ai également dû insérer des images de façon dynamique dans le domaine) :

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

Remarque : vous devrez fournir un état booléen valide pour la variable isIE.