Question

I need some help, I can not seem to figure out how to preload images for my next button on an image viewer that I built. I am grabbing image source from mysql database and iterating through them each time the next button is pressed. How can I preload these? Here is my code for next button:

$("#next").click(function(){
            $(h).empty();
            var p = <?php echo json_encode($results); ?>;
            var start = $("#intabdiv img").attr("class");
            var next = p[($.inArray(start, p) + 1) % p.length];
            //Checking the ID of thumbnail pictures and determining the id here
            var hinext = "../php/admin/portfolio/before/"+next;
            $("#intabdiv img").attr('src',hinext);
            $("#intabdiv img").attr('class',next);
            //Centering image on screen
            var h = $("#intabdiv img").width() + 70;
            //ww is defined beforehand and is the windows width.
            var total = ww - (h / 2);
            $(".popupbox").css("margin-left", total);
        });

Answer 1

Not enjoying your code. Try putting in a few line breaks every now and again (before comments is usually a good place).

Anyway, this is a good way to preload images using jquery:

$('<img />').attr('src', 'http://url/to/image.jpg');

The first part creates an image element (but doesn’t add it to the DOM)

$('<img />')

The next part sets the SRC and therefore loads the image resource in the browser:

attr('src', 'http://url/to/image.jpg');