Evento jQuery para imágenes cargadas

¿Es posible detectar cuándo se cargan todas las imágenes a través de un evento jQuery?

Idealmente, debería haber un

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

o

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

Pero no puedo encontrar tal cosa.

Pensé en adjuntar un evento como este:

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

Pero, ¿se romperá esto si una imagen no se carga? Es de vital importancia que se llame al método y en el momento adecuado.

Según la documentación de jQuery , hay una serie de advertencias para usar el evento de carga con imágenes. Como se señaló en otra respuesta, el complemento ahpi.imgload.js está roto, pero la esencia de Paul Irish vinculada ya no se mantiene.

Según Paul Irish, el complemento canónico para detectar eventos de carga completa de imágenes ahora está en:

https://github.com/desandro/imagesloaded

Si desea verificar no todas las imágenes, sino una específica (por ejemplo, una imagen que reemplazó dinámicamente después de que DOM ya está completo), puede usar esto:

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

Puede usar mi complemento waitForImages para manejar esto ...

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

La ventaja de esto es que puede localizarlo en un elemento ancestro y, opcionalmente, puede detectar imágenes referenciadas en el CSS.

Sin embargo, esto es solo la punta del iceberg, consulte la documentación para obtener más funciones.

No se garantiza el uso de jQuery $ (). Load () como un controlador de eventos IMG. Si la imagen se carga desde el caché, es posible que algunos navegadores no activen el evento. En el caso de las versiones (¿más antiguas?) De Safari, si cambió la propiedad SRC de un elemento IMG al mismo valor , el evento onload NO se activará.

Parece que esto se reconoce en el último jQuery (1.4.x) - http://api.jquery.com/load-event - para citar:

Es posible que el evento de carga no se active si la imagen se carga desde la caché del navegador. Para tener en cuenta esta posibilidad, podemos utilizar un evento de carga especial que se activa inmediatamente si la imagen está lista. event.special.load está disponible actualmente como complemento.

Ahora hay un complemento para reconocer este caso y la propiedad "completa" de IE para los estados de carga del elemento IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Según esta respuesta , puede usar el evento de carga jQuery en el windowobjeto en lugar de document:

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

Esto se activará después de que se haya cargado todo el contenido de la página. Esto difiere de lo jQuery(document).load(...)que se activa después de que DOM ha terminado de cargarse.

imagesLoaded Plugin es el camino a seguir, si necesita una solución de navegador cruzado

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

Si solo necesita un IE WorkAround, esto lo hará

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

Hay una nota en el complemento ahpi.imgload.js en este momento que dice que actualmente está roto, y para probar esta esencia en su lugar: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Para imágenes del mismo origen, puede usar:

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

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

tal vez este complemento pueda ser útil: 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

}); 

Creé mi propio script, porque encontré que muchos complementos estaban bastante inflados y solo quería que funcionara como quería. Mine comprueba si cada imagen tiene una altura (altura de imagen nativa). Lo he combinado con la función $ (window) .load () para solucionar los problemas del almacenamiento en caché.

Lo he comentado bastante en código, por lo que debería ser interesante de ver, incluso si no lo usa. Funciona perfectamente para mí.

Sin más preámbulos, aquí está:

Script imgLoad.js

Esperando a que se carguen todas las imágenes ...
Encontré la respuesta a mi problema con jfriend00 aquí jquery: ¿cómo escuchar el evento cargado de imagen de un contenedor div? .. y "if (this.complete)" ¡
Esperando a que se cargue todo y posiblemente algo en la caché! .. y he agregado el evento "error" ... es robusto en todos los navegadores

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

Demostración: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

Es totalmente compatible con todos los navegadores y disparará un evento cuando todas las imágenes estén completamente cargadas.

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