jquery précharger les images

Question

ok, donc j'ai ce "slideshow.html" contenant juste un tas de photos, et le "index.html".

index.html

<a href="">click</a> 
<ul></ul> 

slideshow.html

<li><img src="1.jpg" alt="" /></li> 
<li><img src="2.jpg" alt="" /></li> 
<li><img src="3.jpg" alt="" /></li> 

et j'ai mon script comme celui-ci;

$(document).ready(function(){ 
      $('a').click(function(){ 
      $('ul').append('<li id="preloader"><img src="preLoader.gif" /></li>'); 
        $('ul').load('slideshow.html',function(){ 
          $('#preloader').remove(); 
        }); 
      }); 
}); 

donc je veux le clic pour ajouter le preloader.gif et d'appeler la méthode de charge et après les images forment le slideshow.html sont chargés d'enlever l'animation. En utilisant mon script, ça a gagné, la page est chargée, mais l'animation est supprimée avant que l'image ne soit complètement chargée :(merci

Answer 1

$(document).ready(function(){ 
    //anchor click 
$('a').click(function(){ 
    //empty the div 
    $('div').empty(); 
      //perform ajax request 
    $('div').load('toLoad.html',function(){ 
        //hides all loaded images 
     $('div.imageHolder img').hide(); 
        //applies preloader for each image loaded 
     $('div.imageHolder img').each(function(){ 
      //creates new image object 
      var img = new Image(); 
          //the current image src is stored in sursa variable 
      var sursa = $(this).attr('src'); 
          //the current image parent is stored in parent var 
      var parent = $(this).parent(); 
          //the load animation is appended to current image parent 
      parent.append('<img src="blueLoader.gif" alt="loader" />'); 
      //loading image css settings 
      $('img[alt="loader"]').css({'display':'block','margin':'10px auto'}); 
          //this is the key 
      $(img).load(function(){ 
          //after image is loaded 
       parent.append($(this)); 
       $(this).hide().fadeIn(500).css({'width':'200px','height':'80px'}); 
       $(this).siblings().remove(); 
      }).attr('src',sursa); 


     }); 

    }); 
    return false; 
}); 
    }); 

Answer 2

Le préchargement des images est fait différemment de ceci.En jQuery cela peut être fait quelque chose comme ça (non testé):.!

$('<ul><li id="image1"><img id="throbber1" scr="preLoader.gif" /></li></ul>').appendTo('body'); 
var $img = $(new Image()).attr('src', '1.jpg').appendTo('ul li#image1'); 
$img.load(function() { 
    $('#throbber1').hide(); 
});