Vérifiez si une image est chargée (aucune erreur) avec jQuery

StackOverflow https://stackoverflow.com/questions/1977871

Question

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é, il fait une chose, quand une erreur se produit, il fait autre chose. J'utilise jQuery load() et les méthodes error() comme des événements. Après ces événements, je vérifier l'image élément DOM pour la .complete pour vous assurer que l'image n'a pas été déjà chargé avant jQuery pourrait enregistrer les événements.

Il fonctionne correctement, sauf en cas d'erreur avant jQuery peut enregistrer les événements. La seule solution que je peux penser est d'utiliser l'attribut img onerror pour stocker un « drapeau » quelque part dans le monde (ou sur le nœud il est auto) qui dit qu'il n'a pas si jQuery peut vérifier que « le magasin / node » lors de la vérification .complete.

Quelqu'un at-il une meilleure solution?

Modifier: principaux points en gras et en a ajouté des détails supplémentaires ci-dessous: Je vérifie si une image est complète (aka chargée) après ajouter une charge et événement d'erreur sur l'image. De cette façon, si l'image a été chargée avant que les événements ont été enregistrés, je saurai encore. Si l'image n'est pas chargé après les événements puis les événements se chargeront de lui quand il fait. Le problème est, je peux facilement vérifier si une image est déjà chargée, mais Je ne peux pas dire si une erreur est survenue à la place.

Était-ce utile?

La solution

Une autre option consiste à déclencher l'onload et / ou des événements de onerror en créant un élément d'image dans la mémoire et définissant son attribut src à l'attribut src 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"))
;

Hope this helps!

Autres conseils

Vérifiez les propriétés de complete et 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;
}

D'après ma compréhension de la spécification W3C HTML pour l'élément img , vous devriez être en mesure de le faire en utilisant une combinaison de complete et naturalHeight attributs, comme si : 

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

De la spécification de l'attribut complete :

  

L'IDL attribut complet doit retourner vrai si l'un des éléments suivants   conditions est vrai:

     
      
  • L'attribut src est omis.
    •   
  • La dernière tâche qui est mis en attente par la source de la tâche de mise en réseau une fois que la ressource a été tiré par les cheveux a été mis en attente.
    •   
  • L'élément img est tout à fait disponible.
    •   
  • L'élément est brisé img.
    •   
     

Dans le cas contraire, l'attribut doit retourner false.

Donc, essentiellement, complete renvoie true si l'image a soit terminé le chargement, ou n'a pas réussi à charger. Puisque nous voulons seulement le cas où l'image chargée, nous devons vérifier avec succès nauturalHeight attribut ainsi:

  

Les attributs IDL naturalWidth et naturalHeight doivent retourner le   largeur intrinsèque et la hauteur de l'image en pixels CSS, si l'image   est disponible, ou bien 0.

available est défini comme ceci:

  

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

     
      
  • Non disponible -. L'agent utilisateur n'a pas obtenu de données d'image
    •   
  • Partiellement disponible -. L'agent utilisateur a obtenu une partie 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 pas décoder même suffisamment image pour obtenir l'image   dimensions (par exemple l'image est corrompu, ou le format n'est pas   pris en charge, ou aucune donnée n'a pu être obtenues).
    •   
     

Lorsqu'un élément img est soit à l'état partiellement disponibles ou en   l'état complètement disponible, il est dit être disponible.

Donc, si l'image est « cassé » (n'a pas réussi à charger), alors il sera dans l'état brisé, pas l'état disponible, donc naturalHeight sera de 0.

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

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

J'ai essayé beaucoup de façons différentes et de cette façon est le seul 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 les DOM et prêt. Cela vaut pour les images ajoutées dynamiquement aussi. http://jsfiddle.net/kalmarsh80/nrAPk/

Récupérer des informations à partir d'éléments d'image sur la page
Test de travail sur Chrome et Firefox
Travailler jsFiddle (ouvrir 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);

});

Note: je jQuery , je pensais que cela peut être atteind javascript complet

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

en temps réel détecteur de réseau - vérifier l'état du réseau sans rafraîchir la page: (Ce n'est pas jquery, mais testé, et 100% fonctionne: (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 perdue appuyez simplement sur le bouton.

Mise à jour 1: Détection automatique sans rafraîchir 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>

Voici comment je l'ai eu à travailler navigateur cross en utilisant une combinaison des méthodes ci-dessus (j'ai aussi 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');
    }
});

Note:. Vous devez fournir un état booléen valide pour la variable Isie

Après avoir lu les solutions intéressantes sur cette page, j'ai créé une solution facile à utiliser fortement influencée par SLaks' et le poste de Noyo qui semble fonctionner sur les versions assez récentes (comme l'écriture) de Chrome, IE, Firefox, Safari et Opera (tous les sous Windows). En outre, il a travaillé sur un émulateur iPhone / iPad je.

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

Ce code renvoie TRUE lorsqu'une image est chargée pleinement et avec succès. Elle retourne FALSE lorsqu'une image soit n'a pas encore complètement chargée ou n'a pas réussi à charger.

Une chose que vous devez être conscient est que cette fonction retourne également FALSE si l'image est une image de pixel 0x0. Mais ces images sont assez rares, et je ne peux pas penser à un cas très utile lorsque vous voulez vérifier si une image de pixel 0x0 a encore chargé:)

D'abord, nous attachons une nouvelle fonction appelée « IsLoaded » au prototype HTMLImageElement, de sorte que la fonction peut être utilisée sur tout é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;

};

Alors, chaque fois que nous devons vérifier l'état de chargement de l'image, il suffit d'appeler la fonction « IsLoaded ». 

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

Par le commentaire de giorgian sur SLaks' et le poste de Noyo, cette solution ne peut probablement être utilisé comme un chèque unique sur Safari Mobile si vous voulez changer l'attribut SRC. Mais vous pouvez contourner ce problème en créant un élément d'image avec un nouveau attribut SRC au lieu de changer l'attribut SRC sur un élément d'image existant. 

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

// ou comme plug-in 

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

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

Si je comprends bien la propriété .complete est non standard. Il ne peut pas être universel ... Je remarque qu'il semble fonctionner différemment dans Firefox vers IE. Je chargeais un certain nombre d'images en javascript puis de vérifier si elle est complète. Dans Firefox, cela semble fonctionner très bien. Dans IE, il ne pas parce que les images semblent charger sur un autre fil. Il ne fonctionne que si je mets un délai entre mon affectation à image.src et quand je vérifie la propriété image.complete.

Utilisation image.onload et image.onerror ne fonctionne pas pour moi, que ce soit, parce que je dois passer un paramètre de savoir quelle image je parle lorsque la fonction est appelée. De toute façon de faire qui semble à l'échec car il semble en fait passer la même fonction, pas différentes instances de la même fonction. Ainsi, la valeur que je passe dans d'identifier l'image finit toujours par être la dernière valeur dans la boucle. Je ne peux pas penser à une façon de contourner ce problème.

Safari et Chrome, je vois le image.complete vrai et le naturalWidth mis même lorsque la console d'erreur affiche une 404 pour cette image ... et je l'ai enlevé intentionnellement cette image à tester. Mais les travaux ci-dessus ainsi pour Firefox et IE.

Ce bout 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é, que ce code ne fonctionne pas: 

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

pour le faire, vous devez travailler ajouter: 

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

En utilisant ce code JavaScript vous pouvez vérifier 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 cette

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

Tout ce que j'ai essayé, les résultats n'étaient pas fiables.

Mais alors j'ai trouvé la solution. Il est techniquement pas un beau un, mais maintenant je jamais eu une charge d'image ayant échoué.

Qu'est-ce que je l'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 charge juste une seconde fois directement après la première fois, et à la fois l'exécution du gestionnaire d'événements auge.

Tous mes maux de tête ont disparu!

Par ailleurs: Vous les gars de stackoverflow m'a aidé déjà 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');
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top