Controlla se un'immagine è stata caricata (nessun errore) con jQuery

Sto usando JavaScript con la libreria jQuery per manipolare le miniature delle immagini contenute in un elenco non ordinato. Quando l'immagine viene caricata fa una cosa, quando si verifica un errore fa un'altra cosa. Sto usando jQuery load()e error()metodi come eventi. Dopo questi eventi, controllo l'elemento DOM immagine per il .complete per assicurarmi che l'immagine non sia già stata caricata prima che jQuery possa registrare gli eventi.

Funziona correttamente tranne quando si verifica un errore prima che jQuery possa registrare gli eventi. L'unica soluzione a cui riesco a pensare è quella di utilizzare l' onerrorattributo img per memorizzare una "bandiera" da qualche parte a livello globale (o sul nodo stesso) che dice che non è riuscita, quindi jQuery può verificare che "store / node" quando controlli .complete.

Qualcuno ha una soluzione migliore?

Modifica: punti principali in grassetto e ulteriori dettagli aggiunti di seguito: sto verificando se un'immagine è completa (ovvero caricata) DOPO aver aggiunto un evento di caricamento ed errore sull'immagine. In questo modo, se l'immagine è stata caricata prima che gli eventi fossero registrati, lo saprò ancora. Se l'immagine non viene caricata dopo gli eventi, gli eventi se ne occuperanno. Il problema è che posso facilmente verificare se un'immagine è già stata caricata, ma non posso dire se si è verificato invece un errore.

Un'altra opzione è quella di attivare gli eventi onloade / o onerrorcreando un elemento immagine in memoria e impostando il suo srcattributo srcsull'attributo originale dell'immagine originale. Ecco un esempio di cosa intendo:

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

Spero che questo ti aiuti!

Controllare le proprietà completee naturalWidth, in questo ordine.

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;
}

Sulla base della mia comprensione della specifica HTML W3C per l' imgelemento , dovresti essere in grado di farlo utilizzando una combinazione degli attributi completee naturalHeight, in questo modo:

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

Dalla specifica per l' completeattributo:

L'attributo IDL completo deve restituire true se si verifica una delle seguenti condizioni:

• L'attributo src è omesso.
• L'attività finale accodata dall'origine dell'attività di rete una volta recuperata la risorsa è stata messa in coda.
• L'elemento img è completamente disponibile.
• L'elemento img è rotto.

Altrimenti, l'attributo deve restituire false.

Quindi, in sostanza, completerestituisce true se l'immagine ha terminato il caricamento o non è riuscito a caricarsi. Dal momento che vogliamo solo il caso in cui l'immagine è stata caricata correttamente, dobbiamo controllare anche l' nauturalHeightattributo:

L'IDL attribuisce naturalWidthe naturalHeightdeve restituire la larghezza e l'altezza intrinseca dell'immagine, in pixel CSS, se l'immagine è disponibile, oppure 0.

E availablesi definisce così:

Un img è sempre in uno dei seguenti stati:

• Non disponibile : l'agente utente non ha ottenuto alcun dato immagine.
• Parzialmente disponibile : l'agente utente ha ottenuto alcuni dei dati dell'immagine.
• Completamente disponibile : l'agente utente ha ottenuto tutti i dati dell'immagine e sono disponibili almeno le dimensioni dell'immagine.
• Rotto : l'agente utente ha ottenuto tutti i dati immagine che può, ma non può nemmeno decodificare l'immagine abbastanza per ottenere le dimensioni dell'immagine (ad es. L'immagine è corrotta o il formato non è supportato o non è stato possibile ottenere dati) .

Quando un elemento img è nello stato parzialmente disponibile o nello stato completamente disponibile, si dice che sia disponibile.

Quindi se l'immagine è "rotta" (impossibile caricarla), sarà nello stato rotto, non nello stato disponibile, quindi naturalHeightsarà 0.

Pertanto, il controllo imgElement.complete && imgElement.naturalHeight !== 0dovrebbe dirci se l'immagine è stata caricata correttamente.

Puoi leggere ulteriori informazioni al riguardo nelle Specifiche HTML W3C per l' imgelemento o su MDN .

Ho provato molti modi diversi e questo è l'unico che ha funzionato per me

//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');
});

È inoltre possibile aggiungere una funzione di richiamata attivata dopo che tutte le immagini sono state caricate nel DOM e pronte. Questo vale anche per le immagini aggiunte dinamicamente. http://jsfiddle.net/kalmarsh80/nrAPk/

Usa la imagesLoadedlibreria javascript .

Utilizzabile con Javascript semplice e come plugin jQuery.

Caratteristiche:

• ufficialmente supportato da IE8 +
• licenza: MIT
• dipendenze: nessuna
• peso (minimizzato e decompresso): minimizzato 7kb (leggero!)

risorse

• Progetto su github: https://github.com/desandro/imagesloaded
• Sito ufficiale: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• libreria javascript con immagini caricate: qual è il supporto per browser e dispositivi?

Recupera informazioni dagli elementi dell'immagine nella pagina
Test di lavoro su Chrome e Firefox
Working jsFiddle (apri la console per vedere il risultato)

$('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);

});

Nota: ho usato jQuery , ho pensato che questo potesse essere doloroso su javascript completo

Trovo buone informazioni qui OpenClassRoom -> questo è un forum francese

Rilevatore di rete in tempo reale - controlla lo stato della rete senza aggiornare la pagina: (non è jquery, ma testato e funziona al 100%: (testato su Firefox v25.0))

Codice:

<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>

in caso di perdita di connessione, premere il pulsante Again.

Aggiornamento 1: Rilevamento automatico senza aggiornare la pagina:

<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>

Dopo aver letto le interessanti soluzioni in questa pagina, ho creato una soluzione di facile utilizzo fortemente influenzata dal post di SLaks e Noyo che sembra funzionare su versioni piuttosto recenti (al momento della scrittura) di Chrome, IE, Firefox, Safari e Opera (tutto su Windows). Inoltre, ha funzionato su un emulatore iPhone / iPad che ho usato.

Una delle principali differenze tra questa soluzione e SLaks e il post di Noyo è che questa soluzione controlla principalmente le proprietà naturalWidth e naturalHeight. Ho scoperto che nelle attuali versioni del browser, queste due proprietà sembrano fornire i risultati più utili e coerenti.

Questo codice restituisce VERO quando un'immagine è stata caricata completamente E correttamente. Restituisce FALSE quando un'immagine non è stata ancora caricata completamente oppure non è stata caricata correttamente.

Una cosa di cui devi essere consapevole è che questa funzione restituirà anche FALSE se l'immagine è un'immagine di 0x0 pixel. Ma quelle immagini sono abbastanza rare, e non riesco a pensare a un caso molto utile in cui vorresti vedere se un'immagine di pixel 0x0 è stata ancora caricata :)

Innanzitutto alleghiamo una nuova funzione chiamata "isLoaded" al prototipo HTMLImageElement, in modo che la funzione possa essere utilizzata su qualsiasi elemento immagine.

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;

};

Quindi, ogni volta che dobbiamo controllare lo stato di caricamento dell'immagine, chiamiamo semplicemente la funzione "isLoaded".

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

Per il commento di Giorgio sul post di SLaks e Noyo, questa soluzione probabilmente può essere utilizzata come controllo una tantum su Safari Mobile se si prevede di modificare l'attributo SRC. Ma puoi aggirare ciò creando un elemento immagine con un nuovo attributo SRC invece di modificare l'attributo SRC su un elemento immagine esistente.

È così che l'ho fatto funzionare su più browser usando una combinazione dei metodi sopra (avevo anche bisogno di inserire immagini dinamicamente nel 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');
    }
});

Nota: sarà necessario fornire uno stato booleano valido per la variabile isIE.

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

// O come plugin

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

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

Da quanto ho capito, la proprietà .complete non è standard. Potrebbe non essere universale ... Ho notato che sembra funzionare diversamente in Firefox versi IE. Sto caricando un numero di immagini in javascript, quindi controllo se completo. In Firefox, questo sembra funzionare alla grande. In IE, ciò non accade perché le immagini sembrano caricarsi su un altro thread. Funziona solo se inserisco un ritardo tra la mia assegnazione a image.src e quando controllo la proprietà image.complete.

Anche usare image.onload e image.onerror non funziona per me, perché devo passare un parametro per sapere di quale immagine sto parlando quando viene chiamata la funzione. Qualsiasi modo per farlo sembra fallire perché in realtà sembra passare la stessa funzione, non diverse istanze della stessa funzione. Quindi il valore che ci passo per identificare l'immagine finisce sempre per essere l'ultimo valore nel loop. Non riesco a pensare ad alcun modo per aggirare questo problema.

Su Safari e Chrome, vedo image.complete true e naturalWidth impostati anche quando la console degli errori mostra un 404 per quell'immagine ... e ho rimosso intenzionalmente quell'immagine per testarlo. Ma quanto sopra funziona bene per Firefox e IE.

Questo frammento di codice mi ha aiutato a risolvere i problemi di memorizzazione nella cache del browser:

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

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

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

Quando la cache del browser è disabilitata, solo questo codice non funziona:

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

per farlo funzionare devi aggiungere:

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

Utilizzando questo JavaScriptcodice è possibile verificare che l'immagine sia stata caricata correttamente o meno.

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

Prova questo

Ho avuto molti problemi con il caricamento completo di un'immagine e EventListener.

Qualunque cosa abbia provato, i risultati non sono stati affidabili.

Ma poi ho trovato la soluzione. Tecnicamente non è bello, ma ora non ho mai avuto un caricamento di immagine fallito.

Cosa ho fatto:

                    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");
                }

Invece di caricare l'immagine una volta, l'ho appena caricata una seconda volta direttamente dopo la prima volta ed entrambi corro attraverso il gestore degli eventi.

Tutti i miei mal di testa sono spariti!

A proposito: voi ragazzi di StackOverflow mi avete aiutato già più di cento volte. Per questo un grandissimo grazie!

Questo ha funzionato bene per me :)

$('.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');
});