A maneira oficial de pedir ao jQuery espera que todas as imagens sejam carregadas antes de executar algo

No jQuery quando você faz isso:

$(function() { alert("DOM is loaded, but images not necessarily all loaded"); }); 

Aguarda que o DOM carregue e execute seu código. Se todas as imagens não estiverem carregadas, ainda executará o código. Isso é obviamente o que queremos se estivermos inicializando qualquer material do DOM, como mostrar ou ocultar elementos ou append events.

Digamos que eu queira alguma animação e não quero que ela seja executada até que todas as imagens sejam carregadas. Existe uma maneira oficial no jQuery para fazer isso?

A melhor maneira que eu tenho é usar , mas eu realmente não quero fazer isso a menos que eu tenha que fazer.

Nota: Há um bug no jQuery 1.3.1 no Internet Explorer que realmente espera que todas as imagens sejam carregadas antes de executar o código dentro de $function() { } . Então, se você estiver usando essa plataforma, obterá o comportamento que estou procurando, em vez do comportamento correto descrito acima.

   

Com jQuery, você usa $(document).ready() para executar algo quando o DOM é carregado e $(window).on("load", handler) para executar algo quando todas as outras coisas são carregadas também, como o imagens.

A diferença pode ser vista no seguinte arquivo HTML completo, desde que você tenha um arquivo jollyroger JPEG (ou outros arquivos adequados):

                 Hello            // : 100 copies of this        

Com isso, a checkbox de alerta aparece antes das imagens serem carregadas, porque o DOM está pronto nesse ponto. Se você, então, mudar:

 $(document).ready(function() { 

para dentro:

 $(window).on("load", function() { 

então a checkbox de alerta não aparece até que as imagens sejam carregadas.

Portanto, para esperar até que a página inteira esteja pronta, você pode usar algo como:

 $(window).on("load", function() { // weave your magic here. }); 

Escrevi um plug-in que pode triggersr retornos de chamada quando as imagens foram carregadas em elementos ou triggersdas uma vez por imagem carregada.

É semelhante a $(window).load(function() { .. }) , exceto que permite definir qualquer seletor para verificar. Se você só quer saber quando todas as imagens em #content (por exemplo) foram carregadas, este é o plugin para você.

Também suporta o carregamento de imagens referenciadas no CSS, como background-image , list-style-image , etc.

plugin jQuery waitForImages

  • Repositório GitHub .
  • Leiame .
  • Fonte de produção .
  • Fonte de desenvolvimento .

Exemplo de uso

 $('selector').waitForImages(function() { alert('All images are loaded.'); }); 

Exemplo no jsFiddle .

Mais documentação está disponível na página do GitHub.

$(window).load() funcionará apenas na primeira vez que a página for carregada. Se você estiver fazendo coisas dinâmicas (exemplo: clique no botão, aguarde o carregamento de novas imagens), isso não funcionará. Para conseguir isso, você pode usar meu plugin:

Demonstração

Baixar

 /** * Plugin which is applied on a list of img objects and calls * the specified callback function, only when all of them are loaded (or errored). * @author: H. Yankov (hristo.yankov at gmail dot com) * @version: 1.0.0 (Feb/22/2010) * http://yankov.us */ (function($) { $.fn.batchImageLoad = function(options) { var images = $(this); var originalTotalImagesCount = images.size(); var totalImagesCount = originalTotalImagesCount; var elementsLoaded = 0; // Init $.fn.batchImageLoad.defaults = { loadingCompleteCallback: null, imageLoadedCallback: null } var opts = $.extend({}, $.fn.batchImageLoad.defaults, options); // Start images.each(function() { // The image has already been loaded (cached) if ($(this)[0].complete) { totalImagesCount--; if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount); // The image is loading, so attach the listener } else { $(this).load(function() { elementsLoaded++; if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount); // An image has been loaded if (elementsLoaded >= totalImagesCount) if (opts.loadingCompleteCallback) opts.loadingCompleteCallback(); }); $(this).error(function() { elementsLoaded++; if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount); // The image has errored if (elementsLoaded >= totalImagesCount) if (opts.loadingCompleteCallback) opts.loadingCompleteCallback(); }); } }); // There are no unloaded images if (totalImagesCount < = 0) if (opts.loadingCompleteCallback) opts.loadingCompleteCallback(); }; })(jQuery); 

Para aqueles que querem ser notificados da conclusão do download de uma única imagem que é solicitada após os $(window).load , você pode usar o evento de load do elemento de imagem.

por exemplo:

 // create a dialog box with an embedded image var $dialog = $("
"); // get the image element (as a jQuery object) var $imgElement = $dialog.find("img"); // wait for the image to load $imgElement.load(function() { alert("The image has loaded; width: " + $imgElement.width() + "px"); });

Nenhuma das respostas até agora deu o que parece ser a solução mais simples.

 $('#image_id').load( function () { //code here }); 

Eu recomendaria usar a biblioteca javascript imagesLoaded.js .

Por que não usar o $(window).load() do jQuery?

Conforme solicitado em https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

É uma questão de escopo. imagesLoaded permite que você direcione um conjunto de imagens, enquanto $(window).load() segmenta todos os ativos – incluindo todas as imagens, objects, arquivos .js e .css e até mesmo iframes. Provavelmente, o imagesLoaded será acionado antes de $(window).load() porque está direcionando um conjunto menor de ativos.

Outras boas razões para usar imagens carregadas

  • oficialmente suportado pelo IE8 +
  • licença: MIT License
  • dependencies: nenhum
  • peso (minified & gzipped): 7kb minificado (luz!)
  • construtor de download (ajuda a reduzir o peso): sem necessidade, já minúsculo
  • no Github: SIM
  • comunidade e colaboradores: muito grandes, mais de 4000 membros, embora apenas 13 colaboradores
  • história e contribuições: estável como relativamente antigo (desde 2010) mas ainda ativo

Recursos

Com jQuery eu venho com isso …

 $(function() { var $img = $('img'), totalImg = $img.length; var waitImgDone = function() { totalImg--; if (!totalImg) alert("Images loaded!"); }; $('img').each(function() { $(this) .load(waitImgDone) .error(waitImgDone); }); }); 

Demonstração: http://jsfiddle.net/molokoloco/NWjDb/

Use imagesLoaded PACKAGED v3.1.8 (6,8 Kb quando minimizado). É relativamente antigo (desde 2010), mas ainda ativo projeto.

Você pode encontrá-lo no github: https://github.com/desandro/imagesloaded

Seu site oficial: http://imagesloaded.desandro.com/

Por que é melhor que usar:

 $(window).load() 

Porque você pode querer carregar imagens dinamicamente, assim: jsfiddle

 $('#button').click(function(){ $('#image').attr('src', '...'); }); 

Desta forma, você pode executar uma ação quando todas as imagens dentro do corpo ou qualquer outro contêiner (que depende da sua seleção) são carregadas. PURE JQUERY, sem pluggins necessários.

 var counter = 0; var size = $('img').length; $("img").load(function() { // many or just one image(w) inside body or any other container counter += 1; counter === size && $('body').css('background-color', '#fffaaa'); // any action }).each(function() { this.complete && $(this).load(); }); 

Minha solução é semelhante ao molokoloco . Escrito como function jQuery:

 $.fn.waitForImages = function (callback) { var $img = $('img', this), totalImg = $img.length; var waitImgLoad = function () { totalImg--; if (!totalImg) { callback(); } }; $img.each(function () { if (this.complete) { waitImgLoad(); } }) $img.load(waitImgLoad) .error(waitImgLoad); }; 

exemplo: