Verifique se as imagens estão carregadas?

Eu estou procurando um sulotion que verifique se todas as imagens são carregadas antes de serem usadas em um slider / rotador de imagens. Eu estava pensando em uma solução que mostra apenas os botões ou miniaturas das imagens quando as imagens principais são carregadas para evitar que o usuário clique em uma imagem que não tenha sido baixada por completo.

O texto dos documentos .ready jQuery pode ajudar a tornar a distinção entre load e ready mais clara:

Enquanto o JavaScript fornece o evento load para executar o código quando uma página é renderizada, esse evento não é acionado até que todos os ativos, como imagens, tenham sido completamente recebidos. Na maioria dos casos, o script pode ser executado assim que a hierarquia DOM tiver sido totalmente construída. O handler passado para .ready () é garantido para ser executado depois que o DOM estiver pronto, então este é geralmente o melhor lugar para append todos os outros manipuladores de events e executar outro código jQuery.

… e dos documentos .load :

O evento load é enviado para um elemento quando ele e todos os subelementos foram completamente carregados. Esse evento pode ser enviado para qualquer elemento associado a uma URL: imagens, scripts, frameworks, iframes e o object da janela.

Então, o .load é o que você está procurando. O que é ótimo sobre esse evento é que você pode anexá-lo apenas a um subconjunto do DOM. Digamos que você tenha suas imagens de apresentação de slides em um div como este:

  

… então você poderia usar .load apenas no contêiner .slideshow para acionar uma vez que todas as imagens no contêiner tenham sido carregadas, independentemente de outras imagens na página.

 $('.slideshow img').load(function(){ $('.slideshow').show().slideshowPlugin(); }); 

(Eu coloquei em um display:none apenas como um exemplo. Ele iria esconder as imagens enquanto elas carregam.)

Atualização (03.04.2013)
Este método está obsoleto desde a versão 1.8 do jQuery

Você pode acionar cada evento $('img').load() e ativar o evento de link / clique relacionado somente quando sua carga for acionada. A vantagem de fazer isso imagem por imagem é que, se certas imagens estiverem demorando mais para serem carregadas, você ainda pode permitir que as mais rápidas sejam “clicáveis”.

 $('img').load(function() { // find the related link or click event and enable/add it }); 

Em vez de verificar se todas as imagens estão carregadas, por que não criar o controle deslizante / rotador usando o evento $(window).load() , em vez do usual $(document).ready() ? $(window).load() espera que a página termine de carregar, incluindo resources como imagens, antes de executar.

Veja: window.onload vs. body.onload vs. document.onready (também no Stack Overflow).