Vérifier si une image est chargée (pas d'erreur) avec jQuery

J'utilise JavaScript avec la bibliothèque jQuery pour manipuler les 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()et les error()méthodes comme événements. Après ces événements, je vérifie l'élément DOM image pour le .complete pour m'assurer que l'image n'était pas déjà chargée avant que jQuery puisse enregistrer les événements.

Cela fonctionne correctement sauf lorsqu'une erreur se produit avant que jQuery puisse enregistrer les événements. La seule solution à laquelle je peux penser est d'utiliser l'imgonerror attribut pour stocker un "indicateur" quelque part dans le monde (ou sur le nœud c'est lui-même) qui dit qu'il a échoué afin que jQuery puisse vérifier que "stocker / nœud" lors de la vérification de .complete.

Quelqu'un a une meilleure solution?

Edit: Points principaux en gras et détails supplémentaires ajoutés ci-dessous: Je vérifie si une image est complète (alias 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 encore. Si l'image n'est pas chargée après les événements, les événements s'en occuperont le cas échéant. Le problème 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.

Une autre option consiste à déclencher les événements onloadet / ou onerroren créant un élément d'image en mémoire et en définissant son srcattribut sur l' srcattribut d'origine de l'image d'origine. 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 t'aides!

Vérifiez les propriétés completeet naturalWidth, 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;
}

Sur la base de ma compréhension de la spécification HTML W3C pour l' imgélément , vous devriez pouvoir le faire en utilisant une combinaison des attributs completeet naturalHeight, comme ceci:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

De la spécification de l' completeattribut:

L'attribut IDL complete doit renvoyer true si l'une des conditions suivantes est vraie:

• L'attribut src est omis.
• La tâche finale mise en file d'attente par la source de tâches de mise en réseau une fois la ressource récupérée a été mise en file d'attente.
• L'élément img est entièrement disponible.
• L'élément img est cassé.

Sinon, l'attribut doit retourner false.

Donc, essentiellement, completerenvoie true si l'image a terminé le chargement ou n'a pas pu se charger. Puisque nous voulons uniquement le cas où l'image a été chargée avec succès, nous devons également vérifier l' nauturalHeightattribut:

L'IDL attribue naturalWidthet naturalHeightdoit renvoyer la largeur et la hauteur intrinsèques de l'image, en pixels CSS, si l'image est disponible, sinon 0.

Et availableest défini comme suit:

Un img est toujours dans l'un des états suivants:

• Non disponible - L'agent utilisateur n'a obtenu aucune donnée d'image.
• Partiellement disponible - L'agent utilisateur a obtenu certaines des données d'image.
• Entièrement disponible - L'agent utilisateur a obtenu toutes les données d'image et au moins les dimensions de l'image sont disponibles.
• Cassé - L'agent utilisateur a obtenu toutes les données d'image qu'il peut, mais il ne peut même pas décoder suffisamment l'image pour obtenir les dimensions de l'image (par exemple, l'image est corrompue, ou le format n'est pas pris en charge, ou aucune donnée n'a pu être obtenue) .

Lorsqu'un élément img est soit dans l'état partiellement disponible soit dans l'état complètement disponible, il est dit qu'il est disponible.

Donc, si l'image est "cassée" (échec du chargement), alors elle sera à l'état cassé, pas à l'état disponible, donc naturalHeight sera donc à 0.

Par conséquent, la vérification imgElement.complete && imgElement.naturalHeight !== 0 doit nous indiquer si l'image a été chargée avec succès.

Vous pouvez en savoir plus à ce sujet dans la spécification HTML W3C pour l' imgélément , ou sur MDN .

J'ai essayé de nombreuses façons différentes et c'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/

Utiliser la imagesLoadedbibliothèque javascript .

Utilisable avec du Javascript simple et en tant que plugin jQuery.

Fonctionnalités:

• officiellement soutenu 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 officiel: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• bibliothèque javascript imagesloaded: quelle est la prise en charge du navigateur et de l'appareil?

Récupérez les informations des éléments de l'image sur la page
Test de travail sur Chrome et Firefox
Travail jsFiddle (ouvrez votre console pour voir le résultat)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

Remarque: j'ai utilisé jQuery , je pensais que cela pouvait être obtenu en javascript complet

Je trouve de bonnes informations ici OpenClassRoom -> c'est un forum français

Détecteur de réseau en temps réel - vérifiez l'état du réseau sans rafraîchir la page: (ce n'est pas jquery, mais testé, et fonctionne à 100%: (testé sur Firefox v25.0))

Code:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

si la connexion est perdue, appuyez simplement sur le bouton Again.

Mise à jour 1: détection automatique sans rafraîchissement de la page:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

Après avoir lu les solutions intéressantes sur cette page, j'ai créé une solution facile à utiliser très influencée par la publication de SLaks et Noyo qui semble fonctionner sur des versions assez récentes (au moment de l'écriture) de Chrome, IE, Firefox, Safari et Opera (tout sous Windows). En outre, cela a fonctionné sur un émulateur iPhone / iPad que j'ai utilisé.

Une différence majeure entre cette solution et la publication de SLaks et Noyo est que cette solution vérifie principalement les propriétés naturalWidth et naturalHeight. J'ai trouvé que dans les versions actuelles du navigateur, ces deux propriétés semblent fournir les résultats les plus utiles et les plus cohérents.

Ce code renvoie VRAI lorsqu'une image a été entièrement chargée ET avec succès. Il renvoie FAUX lorsqu'une image n'a pas encore été entièrement chargée OU n'a pas pu se charger.

Une chose que vous devez savoir est que cette fonction retournera également FALSE si l'image est une image de 0x0 pixel. Mais ces images sont assez rares, et je ne peux pas penser à un cas très utile où vous voudriez vérifier si une image 0x0 pixel a encore été chargée :)

Nous attachons d'abord une nouvelle fonction appelée "isLoaded" au prototype HTMLImageElement, afin que la fonction puisse être utilisée sur n'importe quel élément d'image.

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

Ensuite, chaque fois que nous devons vérifier l'état de chargement de l'image, nous appelons simplement la fonction "isLoaded".

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

Selon le commentaire de Giorgian sur la publication de SLaks et Noyo, cette solution ne peut probablement être utilisée comme vérification unique sur Safari Mobile que si vous prévoyez de changer l'attribut SRC. Mais vous pouvez contourner cela en créant un élément d'image avec un nouvel attribut SRC au lieu de modifier l'attribut SRC sur un élément d'image existant.

Voici comment je l'ai fait fonctionner avec plusieurs navigateurs en utilisant une combinaison des méthodes ci-dessus (j'avais également besoin d'insérer des images dynamiquement dans le dom):

$('#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.

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// Ou en tant que plugin

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

Si je comprends bien, la propriété .complete n'est pas standard. Ce n'est peut-être pas universel ... Je remarque qu'il semble fonctionner différemment dans Firefox vers IE. Je charge un certain nombre d'images en javascript puis vérifie si elles sont terminées. Dans Firefox, cela semble très bien fonctionner. Dans IE, ce n'est pas le cas car les images semblent se charger sur un autre thread. Cela ne fonctionne que si je mets un délai entre mon affectation à image.src et lorsque je vérifie la propriété image.complete.

L'utilisation de image.onload et image.onerror ne fonctionne pas non plus pour moi, car je dois passer un paramètre pour savoir de quelle image je parle lorsque la fonction est appelée. Toute façon de faire cela semble échouer car elle semble en fait passer la même fonction, pas différentes instances de la même fonction. Donc la valeur que je lui passe pour identifier l'image finit toujours par être la dernière valeur de la boucle. Je ne peux penser à aucun moyen de contourner ce problème.

Sur Safari et Chrome, je vois l'image.complete vraie et la largeur naturelle définie même lorsque la console d'erreur affiche un 404 pour cette image ... et j'ai intentionnellement supprimé cette image pour tester cela. Mais ce qui précède fonctionne bien pour Firefox et IE.

Cet extrait de code m'a aidé à résoudre les problèmes de mise en cache du navigateur:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

Lorsque le cache du navigateur est désactivé, seul ce code ne fonctionne pas:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

pour le faire fonctionner, vous devez ajouter:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

En utilisant ce JavaScriptcode, vous pouvez vérifier que l'image est correctement chargée ou non.

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

Essayez ceci

J'ai eu beaucoup de problèmes avec la charge complète d'une image et l'EventListener.

Quoi que j'aie essayé, les résultats n'étaient pas fiables.

Mais j'ai trouvé la solution. Ce n'est techniquement pas agréable, mais maintenant je n'ai jamais eu de chargement d'image défaillant.

Ce que j'ai fait:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

Au lieu de charger l'image une fois, je la charge juste une deuxième fois directement après la première fois et les deux s'exécutent via le gestionnaire d'événements.

Tous mes maux de tête ont disparu!

Au fait: les gars de stackoverflow m'ont déjà aidé plus de cent fois. Pour cela un très grand merci!

Celui-ci a bien fonctionné pour moi :)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});