Evento jQuery per le immagini caricate

È possibile rilevare quando tutte le immagini vengono caricate tramite un evento jQuery?

Idealmente, dovrebbe esserci un file

$(document).idle(function()
{
}

o

$(document).contentLoaded(function()
{
}

Ma non riesco a trovare una cosa del genere.

Ho pensato di allegare un evento come questo:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

Ma si interromperà se un'immagine non viene caricata? È di fondamentale importanza che il metodo venga chiamato e al momento giusto.

Secondo la documentazione di jQuery , ci sono una serie di avvertenze per l'utilizzo dell'evento load con le immagini. Come notato in un'altra risposta, il plugin ahpi.imgload.js è rotto, ma l'essenza Paul Irish collegata non viene più mantenuta.

Secondo Paul Irish, il plug-in canonico per il rilevamento degli eventi di completamento del caricamento delle immagini è ora all'indirizzo:

https://github.com/desandro/imagesloaded

Se vuoi controllare non tutte le immagini, ma una specifica (es. Un'immagine che hai sostituito dinamicamente dopo che DOM è già completo) puoi usare questo:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

Puoi usare il mio plugin waitForImages per gestire questo ...

$(document).waitForImages(function() {
   // Loaded.
});

Il vantaggio di ciò è che puoi localizzarlo in un elemento antenato e può facoltativamente rilevare le immagini a cui fa riferimento il CSS.

Questa è solo la punta dell'iceberg, controlla la documentazione per ulteriori funzionalità.

L'uso di jQuery $ (). Load () come gestore di eventi IMG non è garantito. Se l'immagine viene caricata dalla cache, alcuni browser potrebbero non attivare l'evento. Nel caso di versioni (precedenti?) Di Safari, se hai modificato la proprietà SRC di un elemento IMG con lo stesso valore , l'evento onload NON si attiverà.

Sembra che questo sia riconosciuto nell'ultimo jQuery (1.4.x) - http://api.jquery.com/load-event - per citare:

È possibile che l'evento di caricamento non venga attivato se l'immagine viene caricata dalla cache del browser. Per tenere conto di questa possibilità, possiamo utilizzare uno speciale evento di caricamento che si attiva immediatamente se l'immagine è pronta. event.special.load è attualmente disponibile come plugin.

Ora c'è un plug-in per riconoscere questo caso e la proprietà "complete" di IE per il caricamento dell'elemento IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Secondo questa risposta , è possibile utilizzare l' evento carico jQuery sul windowoggetto invece del document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

Questo verrà attivato dopo che tutto il contenuto della pagina è stato caricato. Questo è diverso da quello jQuery(document).load(...)che viene attivato al termine del caricamento del DOM.

imagesLoaded Plugin è la strada da percorrere, se hai bisogno di una soluzione crossbrowser

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

Se hai solo bisogno di un IE WorkAround, questo andrà bene

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

C'è una nota sul plug-in ahpi.imgload.js al momento che dice che è correntemente non funzionante, e per provare invece questa sintesi: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Per le immagini della stessa origine, puoi usare:

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

forse questo plugin potrebbe essere utile: http://www.farinspace.com/jquery-image-preload-plugin/

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

Ho creato il mio script, perché ho trovato molti plugin piuttosto gonfiati e volevo solo che funzionasse come volevo. Il mio controlla se ogni immagine ha un'altezza (altezza dell'immagine nativa). L'ho combinato con la funzione $ (window) .load () per aggirare i problemi di memorizzazione nella cache.

L'ho commentato in codice abbastanza pesantemente, quindi dovrebbe essere interessante da guardare, anche se non lo usi. Funziona perfettamente per me.

Senza ulteriori indugi, eccolo:

script imgLoad.js

In attesa del caricamento di tutte le immagini ...
Ho trovato la risposta al mio problema con jfriend00 qui jquery: come ascoltare l'evento caricato di immagine di un div contenitore? .. e "if (this.complete)"
Aspettando che tutto venga caricato e un po 'eventualmente nella cache! .. e ho aggiunto l'evento "error" ... è robusto su tutti i browser

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

Demo: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

È completamente supportato da tutti i browser e attiverà un evento quando tutte le immagini saranno completamente caricate.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload