evento jQuery para imagens carregadas

É possível detectar quando todas as imagens são carregadas por meio de um evento jQuery?

Idealmente, deve haver um

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

ou

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

Mas não consigo encontrar tal coisa.

Pensei em anexar um evento como este:

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

Mas isso vai quebrar se uma imagem não carregar? É extremamente importante que o método seja chamado e no momento certo.

De acordo com a documentação do jQuery , há uma série de ressalvas para o uso do evento load com imagens. Conforme observado em outra resposta, o plug-in ahpi.imgload.js está quebrado, mas a essência Paul Irish vinculada não é mais mantida.

De acordo com Paul Irish, o plug-in canônico para detectar eventos completos de carregamento de imagem agora está em:

https://github.com/desandro/imagesloaded

Se você deseja verificar não todas as imagens, mas uma específica (por exemplo, uma imagem que você substituiu dinamicamente após o DOM já estar completo), você pode usar isto:

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

Você pode usar meu plugin waitForImages para lidar com isso ...

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

A vantagem disso é que você pode localizá-lo em um elemento ancestral e, opcionalmente, detectar imagens referenciadas no CSS.

No entanto, esta é apenas a ponta do iceberg, verifique a documentação para obter mais funcionalidades.

O uso de jQuery $ (). Load () como um manipulador de eventos IMG não é garantido. Se a imagem for carregada do cache, alguns navegadores podem não disparar o evento. No caso de versões (mais antigas?) Do Safari, se você alterou a propriedade SRC de um elemento IMG para o mesmo valor , o evento onload NÃO será disparado.

Parece que isso é reconhecido no jQuery (1.4.x) mais recente - http://api.jquery.com/load-event - para citar:

É possível que o evento de carregamento não seja disparado se a imagem for carregada do cache do navegador. Para levar em conta essa possibilidade, podemos usar um evento de carregamento especial que dispara imediatamente se a imagem estiver pronta. event.special.load está atualmente disponível como um plugin.

Agora existe um plug-in para reconhecer este caso e a propriedade "completa" do IE para os estados de carregamento do elemento IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

De acordo com esta resposta , você pode usar o evento de carregamento jQuery no windowobjeto em vez de document:

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

Isso será acionado depois que todo o conteúdo da página for carregado. Isso difere do jQuery(document).load(...)que é acionado após o DOM terminar de carregar.

O plugin imagesLoaded é o caminho a percorrer, se você precisar de uma solução para 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 você só precisa de um IE WorkAround, isso bastará

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

No momento, há uma observação sobre o plug-in ahpi.imgload.js dizendo que ele está corrompido no momento e tente esta essência: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Para imagens da mesma origem, você pode usar:

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

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

talvez este plugin possa 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

}); 

Eu criei meu próprio script, porque achei muitos plug-ins bastante inchados, e eu só queria que funcionasse da maneira que eu queria. O meu verifica se cada imagem tem uma altura (altura da imagem nativa). Combinei isso com a função $ (window) .load () para contornar os problemas de armazenamento em cache.

O código comentei bastante, então deve ser interessante olhar, mesmo se você não o usar. Funciona perfeitamente para mim.

Sem mais delongas, aqui está:

script imgLoad.js

Aguardando o carregamento de todas as imagens ...
Encontrei a resposta ao meu problema com o jfriend00 aqui jquery: como ouvir o evento de imagem carregada de um div de contêiner? .. e "if (this.complete)"
Esperando que tudo carregue e possivelmente algum no cache! .. e eu adicionei o evento "error" ... é robusto em todos os 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...
    });
});

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

window.load = function(){}

É totalmente compatível com todos os navegadores e disparará um evento quando todas as imagens estiverem totalmente carregadas.

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