Preload images if used in jQuery?

Question

I you create a script for an image slider with five images, I guess the images must be preloaded in some way before you can use the slider. When this is used: $(document).ready(function() does that also include the images and every thing is ready to go or must there be some check if also the images are also loaded?

See http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-something for the jQuery.load() function. — Konerak, Mar 06 '11 at 18:31

score 0 · Answer 1 · answered Sep 09 '12 at 20:14

Preload all your images using something like below, and try and call this as early as possible. DOM shouldn't fire until this is finished.

function loadImages(){
    var images = [
        'http://cdn.yourdomain.com/img/image1.png',
        'http://cdn.yourdomain.com/img/image2.jpg',
        'http://cdn.yourdomain.com/img/image3.jpg',
        'http://cdn.yourdomain.com/img/image4.jpg'
    ];
    $(images).each(function() {
        var image = $('<img />').attr('src', this);
    });
}

score 0 · Answer 2 · answered Mar 06 '11 at 18:35

That depends. When the ready event is fired, the DOM is ready to be manipulated. That means the image elements are loaded, but the image files might have been fetched yet.

If your image slider doesn't need to know the dimensions of the images there shouldn't be any problems. If this is not the case, you can use $(window).load(function() { //code } ); instead.

When this event is fired, all external resources have been loaded.

Preload images if used in jQuery?

2 Answers2