预加载下一张图片jQuery

Question

I am creating a slideshow using nested li's:

<ul id="ss_images_set">
                <li>
                    <img link="images/koala_1.jpg" />
                    <p class="img_caption">&#169;Copyright</p>
                    <p class="img_author">John Merriam</p>
                    <p class="img_href">http://www.twitter.com</p>
                    <p class="img_hashtag">JohnMerriam</p>
                </li>

I will be uploading new images daily to this slideshow, so there will be many images in the set (hundreds). There are so many pre-loaders out there that I am confused as to what to use to load only the next image. The slideshow has an image pre-loader, but I don't think it works properly because the next images are clearly not cached (content below slideshow jumps up and down when going to next image).

Here is the pre-loader script:

function preload_images(){
var pre_image = curr_img - 1;
if(pre_image < 0) pre_image = (tot_elements-1);

var curr_obj = 0;

if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

var pre_image = curr_img + 1;
if(tot_elements==pre_image) pre_image = 0;
if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

I don't know why it's not caching. Is it written wrong? Is it in the wrong spot in the following fiddle?

Fiddle with JS: http://jsfiddle.net/doobada/9m9eq/

Current ex. of slideshow (content below jumps up and down): https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

Ok, jQuery is not my strong suite (taking the tuts+ courses now), but this shouldn't be taking me 3 weeks to figure out.

Thanks for your help.

Answer 1

var newImageUrl = 'someimage.png';

/* preload an image using jQuery: */
$('<img>').attr( {
    src: newImageUrl
} ).load(function() {
    /* image is loaded and could be used */
} );