[Resolvido] Carregar imagens antes de iniciar animação

[marcelo2605 10]

Tenho uma sequência de imagens que aparecem sequencialmente quando se abre a página.

 

$(document).ready(function() {

$('#capa1').delay(200).fadeIn('fast');
$('#capa2').delay(400).fadeIn('fast');
$('#capa5').delay(600).fadeIn('fast');
$('#capa6').delay(800).fadeIn('fast');
$('#capa8').delay(1000).fadeIn('fast');
$('#capa7').delay(1200).fadeIn('fast');
$('#capa9').delay(1400).fadeIn('fast');
$('#capa3').delay(1600).fadeIn('fast');
$('#capa4').delay(1800).fadeIn('fast');
$('#capa10').delay(2000).fadeIn('fast');
$('#capa11').delay(2200).fadeIn('fast');
$('#capa13').delay(2400).fadeIn('fast');
$('#capa12').delay(2600).fadeIn('fast');
$('#capa14').delay(2800).fadeIn('fast');
$('#capa15').delay(3000).fadeIn('fast');
$('#capa16').delay(3200).fadeIn('fast');

});
</script>

 

 

Mas como faço para carregar todas elas antes de iniciar a animação?

[William Bruno 1501]

pesquise por preload javascript.

 

o evento .onload te diz qndo cada imagem está "pronta".

[marcelo2605 10]

William, usei

 

$(window).load(function() {

 

e funcionou para mim.

 

Mas queria colocar um preloader.gif enquanto as imagens não carregarem.

[marcelo2605 10]

Resolvido com:

 

jQuery(function( $ ){
     function preLoad() {
          $("#cover").addClass("hidden");
     }

  function loaded() {
         $("#cover").removeClass("hidden");
         $('div#preloader').css({display:'none'}).remove();
                       }
                       preLoad();
                       window.onload=loaded;
});