jquery: for each request image load from URL, jquery not using already cached images

Question

Hi guys

i have wrote a small slideshow script and the problem is:

Each time slideSwitch() function is called it loads images from server every time even when the image is cached in the browser cache.

here is the code

$(function() { playSlideshow = setInterval(slideSwitchTimed, 4000 ); });


function slideSwitchTimed()
{
    $active = $('.image_thumb ul li.active').next();
    if ( $active.length == 0 ) $active = $('.image_thumb ul li:first');
    slideSwitch();
}


function slideSwitch() 
{
    var $prev = $('.image_thumb ul li.active');
    //Show active list-item
    $prev.removeClass('active');
    $('.highlight').remove();
    $active.addClass('active');

    //Set Variables
    var imgAlt = $active.find('img').attr("alt");
    var imgTitle = $active.find('a').attr("href");
    var imgDesc = $active.find('.block').html();
    var imgDescHeight = $(".main_image").find('.block').height();
    var ids = $active.find('.block').attr("id");

    if ($(this).is(".active")) {
        return false;
    } else {

        $(".main_image img").animate({ opacity: 0}, 250 );
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt }).animate({ opacity: 1}, 250 );
                });
    }
    return false;
    }//EOF slideswitch()