ejemplo - Evento jQuery para imágenes cargadas

jquery prop

Question

¿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 críticamente importante que se llame al método, y en el momento correcto.

Answer 1

Para imágenes del mismo origen, puede usar:

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

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

Answer 2

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

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

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

script imgLoad.js

Answer 3

El uso de jQuery $ (). Load () como controlador de eventos IMG no está garantizado. Si la imagen se carga desde la 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 por el 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 el caché del navegador. Para tener en cuenta esta posibilidad, podemos usar un evento de carga especial que se dispara inmediatamente si la imagen está lista. event.special.load está actualmente disponible como un complemento.

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

Answer 4

Esperando 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 todo se cargue y posiblemente en caché ... y agregué el evento de "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/

Answer 5

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

Answer 6

Puedes usar mi plugin waitForImages para manejar esto ...

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

La ventaja de esto es que puede ubicarlo en un elemento ancestro y, optionally puede detectar las imágenes a las que se hace referencia en el CSS.

Sin embargo, esto es sólo la punta del iceberg. Consulte la documentation para obtener más funcionalidades.

Answer 7

Según esta respuesta , puede usar el documentation en el objeto window lugar del 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 jQuery(document).load(...) que se desencadena después de que el DOM haya terminado de cargarse.

Answer 8

Según la documentation de jQuery, hay varias advertencias para usar el evento de carga con imágenes. Como se señala en otra respuesta, el complemento ahpi.imgload.js está roto, pero el significado ligado de Paul Irish ya no se mantiene.

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

https://github.com/desandro/imagesloaded

Answer 9

Si desea verificar no todas las imágenes, sino una específica (por ej., Una imagen que reemplazó dinámicamente después de que DOM ya se haya completado), puede usar esto:

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

Answer 10

tal vez este complemento pueda ser útil: http://www.farinspace.com/jquery-image-preload-plugin/

Answer 11

https://github.com/desandro/imagesloaded plugin https://github.com/desandro/imagesloaded es un 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'');

Answer 12

window.load = function(){}

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

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

Answer 13

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

Answer 14

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

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

});