[jQuery] jquery preload images

[kknaru]

ok, so i have this "slideshow.html" containing just a bunch of
pictures, and the "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>

and i have my script like this;

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

so i want on click to append the preloader.gif and to call the load
method and after the images form the slideshow.html are loaded to
remove the animation. Using my script it won;t do the thing, the page
is loaded but the animation is dropped before the image is completely
loaded :( thanks