Come posso determinare se un'immagine è stata caricata, usando Javascript/jQuery?

Question

Sto scrivendo alcuni Javascript per ridimensionare l'immagine grande per adattarla alla finestra del browser dell'utente. (Non controllo la dimensione delle immagini di origine, purtroppo.)

Quindi qualcosa di simile sarebbe nel codice HTML:

<img id="photo" 
    src="a_really_big_file.jpg" 
    alt="this is some alt text" 
    title="this is some title text" /> 

C'è un modo per me per determinare se l'immagine src in un tag img è stato scaricato?

Ho bisogno di questo perché sto incontrando un problema se $(document).ready() viene eseguito prima che il browser abbia caricato l'immagine. $("#photo").width() e $("#photo").height() restituiranno la dimensione del segnaposto (il testo alt). Nel mio caso questo è qualcosa come 134 x 20.

In questo momento sto solo controllando se l'altezza della foto è inferiore a 150 e supponendo che, in tal caso, si tratti solo di testo alternativo. Ma questo è piuttosto un trucco, e si interromperebbe se una foto è alta meno di 150 pixel (non è probabile nel mio caso particolare), o se il testo alt è più alto di 150 pixel (potrebbe accadere su una piccola finestra del browser) .

---

Edit: per chi vuole vedere il codice:

$(function() 
{ 
    var REAL_WIDTH = $("#photo").width(); 
    var REAL_HEIGHT = $("#photo").height(); 

    $(window).resize(adjust_photo_size); 
    adjust_photo_size(); 

    function adjust_photo_size() 
    { 
    if(REAL_HEIGHT < 150) 
    { 
     REAL_WIDTH = $("#photo").width(); 
     REAL_HEIGHT = $("#photo").height(); 
     if(REAL_HEIGHT < 150) 
     { 
     //image not loaded.. try again in a quarter-second 
     setTimeout(adjust_photo_size, 250); 
     return; 
     } 
    } 

    var new_width = . . . ; 
    var new_height = . . . ; 

    $("#photo").width(Math.round(new_width)); 
    $("#photo").height(Math.round(new_height)); 
    } 

}); 

---

Aggiornamento: Grazie per i suggerimenti. Esiste il rischio che l'evento non venga attivato se imposto una richiamata per l'evento $("#photo").load, quindi ho definito un evento onLoad direttamente sul tag immagine. Per la cronaca, ecco il codice ho finito per andare con:

<img id="photo" 
    onload="photoLoaded();" 
    src="a_really_big_file.jpg" 
    alt="this is some alt text" 
    title="this is some title text" /> 

Poi in Javascript:

//This must be outside $() because it may get called first 
var isPhotoLoaded = false; 
function photoLoaded() 
{ 
    isPhotoLoaded = true; 
} 

$(function() 
{ 
    //Hides scrollbars, so we can resize properly. Set with JS instead of 
    // CSS so that page doesn't break with JS disabled. 
    $("body").css("overflow", "hidden"); 

    var REAL_WIDTH = -1; 
    var REAL_HEIGHT = -1; 

    $(window).resize(adjust_photo_size); 
    adjust_photo_size(); 

    function adjust_photo_size() 
    { 
    if(!isPhotoLoaded) 
    { 
     //image not loaded.. try again in a quarter-second 
     setTimeout(adjust_photo_size, 250); 
     return; 
    } 
    else if(REAL_WIDTH < 0) 
    { 
     //first time in this function since photo loaded 
     REAL_WIDTH = $("#photo").width(); 
     REAL_HEIGHT = $("#photo").height(); 
    } 

    var new_width = . . . ; 
    var new_height = . . . ; 

    $("#photo").width(Math.round(new_width)); 
    $("#photo").height(Math.round(new_height)); 
    } 

}); 

Answer 1

O aggiungere un listener di eventi, o di avere l'immagine stessa annunciare con onload. Quindi scopri le dimensioni da lì.

<img id="photo" 
    onload='loaded(this.id)' 
    src="a_really_big_file.jpg" 
    alt="this is some alt text" 
    title="this is some title text" /> 

Answer 2

Prova qualcosa di simile:

$("#photo").load(function() { 
    alert("Hello from Image"); 
}); 

Answer 3

Vuoi fare quello che ha detto Allain, tuttavia essere consapevoli del fatto che a volte i carichi di immagini, prima dom pronto, il che significa che il tuo gestore del carico non scatta mai. Il modo migliore è quello di fare come dice Allain, ma impostare la src dell'immagine con javascript dopo aver allegato il load hander. In questo modo puoi garantire che spari.

In termini di accessibilità, il sito funzionerà ancora per le persone senza javascript? Puoi dare al tag img il corretto src, allegare il tuo gestore dom pronto a far girare il tuo js: cancella l'immagine src (dagli un fisso e l'altezza con css per evitare lo sfarfallio della pagina), quindi imposta il gestore di caricamento img, quindi resettare lo src al file corretto. In questo modo si coprono tutte le basi :)

Answer 4

Qualche commento su questo?

...

doShow = function(){ 
    if($('#img_id').attr('complete')){ 
    alert('Image is loaded!'); 
    } else { 
    window.setTimeout('doShow()',100); 
    } 
}; 

$('#img_id').attr('src','image.jpg'); 

doShow(); 

...

Sembra come funziona ovunque ...

Answer 5

La risposta giusta, è quello di utilizzare event.special.load

E 'possibile che l'evento carico non verrà attivato se l'immagine viene caricata dalla cache del browser. Per tenere conto di questa possibilità, possiamo utilizzare un evento di carico speciale che si attiva immediatamente se l'immagine è pronta. event.special.load è attualmente disponibile come plug-in.

Per la documentazione sul .load()

Answer 6

Utilizzando il jquery data store è possibile definire uno stato di 'carico'.

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" /> 

poi altrove si può fare:

if ($('#myimage').data('loaded')) { 
    // loaded, so do stuff 
} 

Answer 7

Ho appena creato una funzione di jQuery per caricare un'immagine utilizzando jQuerys Deferred Object che lo rende molto facile reagire al carico/evento di errore:

$.fn.extend({ 
    loadImg: function(url, timeout) { 
     // init deferred object 
     var defer = $.Deferred(), 
      $img = this, 
      img = $img.get(0), 
      timer = null; 

     // define load and error events BEFORE setting the src 
     // otherwise IE might fire the event before listening to it 
     $img.load(function(e) { 
      var that = this; 
      // defer this check in order to let IE catch the right image size 
      window.setTimeout(function() { 
       // make sure the width and height are > 0 
       ((that.width > 0 && that.height > 0) ? 
        defer.resolveWith : 
        defer.rejectWith)($img); 
      }, 1); 
     }).error(function(e) { 
      defer.rejectWith($img); 
     }); 

     // start loading the image 
     img.src = url; 

     // check if it's already in the cache 
     if (img.complete) { 
      defer.resolveWith($img); 
     } else if (0 !== timeout) { 
      // add a timeout, by default 15 seconds 
      timer = window.setTimeout(function() { 
       defer.rejectWith($img); 
      }, timeout || 15000); 
     } 

     // return the promise of the deferred object 
     return defer.promise().always(function() { 
      // stop the timeout timer 
      window.clearTimeout(timer); 
      timer = null; 
      // unbind the load and error event 
      this.off("load error"); 
     }); 
    } 
}); 

Utilizzo:

var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png') 
.done(function() { 
    alert('image loaded'); 
    $('body').append(this); 
}).fail(function(){ 
    alert('image failed'); 
}); 

vederlo lavorare a: http://jsfiddle.net/roberkules/AdWZj/

Answer 8

controlla questa funzione se l'immagine viene caricata sulla base avente dimensioni misurabili. Questa tecnica è utile se lo script è in esecuzione dopo che alcune delle immagini sono già state caricate.

imageLoaded = function(node) { 
    var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth; 
    var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight; 
    return w+h > 0 ? true : false; 
}; 

Answer 9

C'è un plugin jQuery chiamato "imagesLoaded", che fornisce un metodo compatibile cross-browser per controllare se un'immagine (s) di un elemento sono stati caricati.

sito: https://github.com/desandro/imagesloaded/

di utilizzo per un contenitore che ha molte immagini all'interno:

$('container').imagesLoaded(function(){ 
console.log("I loaded!"); 
}) 

Il plugin è grande:

1. opere per il controllo di un contenitore con molte immagini all'interno
2. funziona per controllare un img per vedere se ha caricato

Answer 10

Come per uno dei recenti commenti alla tua domanda iniziale

$(function() { 

    $(window).resize(adjust_photo_size); 
    adjust_photo_size(); 

    function adjust_photo_size() { 
    if (!$("#photo").get(0).complete) { 
     $("#photo").load(function() { 
      adjust_photo_size(); 
     }); 
    } else { 
     ... 
    } 
}); 

Attenzione Questa risposta potrebbe causare una grave ciclo in IE8 e più basso, perché img.complete non sempre è impostato correttamente dal browser. Se devi supportare ie8, usa una bandiera per ricordare che l'immagine è stata caricata.

Answer 11

ho trovato questo ha lavorato per me

document.querySelector("img").addEventListener("load", function() { alert('onload!'); }); 

Merito va totalmente a Frank Schwieterman, che ha commentato in risposta accettata. Ho dovuto metterlo qui, è troppo prezioso ...

Answer 12

Abbiamo sviluppato una pagina in cui è stato caricato un numero di immagini e quindi eseguito altre funzioni solo dopo che l'immagine è stata caricata. Era un sito occupato che generava molto traffico. Sembra che il seguente semplice script ha lavorato su praticamente tutti i browser:

$(elem).onload = function() { 
    doSomething(); 
} 

ma questo è un potenziale problema PER IE9!

L'UNICO browser su cui abbiamo segnalato problemi è IE9. Non siamo sorpresi? Sembra che il modo migliore per risolvere il problema è di non assegnare uno src all'immagine fino a dopo la funzione onload è stato definito, in questo modo:

$(elem).onload = function() { 
    doSomething(); 
} 
$(elem).attr('src','theimage.png'); 

sembra che IE 9 talvolta non gettare il onload evento per qualunque motivo. Altre soluzioni su questa pagina (come quella di Evan Carroll, ad esempio) non funzionavano ancora. Logicamente, quello ha verificato se lo stato di caricamento era già riuscito e ha attivato la funzione e se non lo era, quindi imposta il gestore onload, ma anche quando lo fai dimostriamo in testing che l'immagine potrebbe caricare tra quelle due linee di js quindi apparendo non caricato sulla prima riga e quindi caricando prima che sia impostato il gestore onload.

Abbiamo trovato che il modo migliore per ottenere quello che vuoi è non definire lo src dell'immagine finché non hai impostato l'innesco dell'evento onload.

Abbiamo appena smesso di supportare IE8 quindi non posso parlare per le versioni precedenti a IE9, altrimenti, tra tutti gli altri browser utilizzati sul sito - IE10 e 11 nonché Firefox, Chrome, Opera , Safari e qualsiasi altra cosa utilizzassero i browser dei dispositivi mobili: impostare lo prima di assegnare il gestore onload non era nemmeno un problema.