jquery preload images

Question

ok, поэтому у меня есть этот «slideshow.html», содержащий только кучу картинок и «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> 

и у меня есть мой сценарий, как это;

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

поэтому я хочу по щелчку для добавления preloader.gif и вызвать метод загрузки и после того, как изображения, формируют slideshow.html загружены, чтобы удалить анимацию. Используя мой скрипт, он выиграл, т. Е. Вещь, страница загружена, но анимация отбрасывается до того, как изображение полностью загружено :(спасибо

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

Предварительная загрузка изображений выполняется иначе, чем это. В jQuery можно сделать что-то вроде этого (непроверенные):.!

$('<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(); 
});