Preloading images in a slider

This slider works but I just 开发者_高级运维need to preload images:

document.observe("dom:loaded", function(event) {
    initSlider()
});

var slider_index = 0;
var auto_scroll = true;
var ctime = false;

function initSlider() {
    $('slider-img').src = slider_images[0];
    $('slider-text').innerHTML = slider_text[0];
    $('slider-link').setAttribute('href',slider_links[0]);
    ctime = window.setTimeout(function() {
        sliderNext(true);
    },7000);
}

function sliderPrev() {
    changeSlide(slider_index-1);
    clearTimeout(ctime);
}

function sliderNext(scroll) {
    if (scroll == true) {
        ctime = window.setTimeout(function() {
            sliderNext(true);
        },21000);
    } else {
        clearTimeout(ctime);
    }
    changeSlide(slider_index+1, scroll);
}

function changeSlide(target, auto) {
    if (auto) auto_scroll = true; else auto_scroll = false;

    if (!auto_scroll) clearTimeout(ctime);

    var name = "slider_thumb" + slider_index;
    $(name).removeClassName("active");
    slider_index = target;
    if ( slider_index >= slider_count ) {
        slider_index = 0;
    } else if ( slider_index < 0 ) {
        slider_index = slider_count - 1;
    }
    $('slider-img').src = slider_images[slider_index];
    $('slider-text').innerHTML = slider_text[slider_index];
    $('slider-link').setAttribute('href',slider_links[slider_index]);
    var name = "slider_thumb" + slider_index;
    $(name).addClassName("active");
}

// Preload Image 
$('<img />')
    .attr('src', 'picture.jpg')
    .load(function(){
        $('.slider').append( $(this) );
        // some other Code
    });