Load Images During Page Startup

I am currently working with radio buttons and check boxes to display images based on values. I am noticing that the images are loading slowly at the start. For example, Have pre-cr

Solution 1:

Yes! Preloading images is really easy if you have JQuery:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(['some-image.gif']).preload();

Also check this resource: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Solution 2:

Here is a function I've made for myself some time ago: http://pastebin.com/GeBawE8r

You can use it as follows:

var loader = new imagePreloader();

// Object containing the names of the imgs as keys and url as values
loader.list = {name: "url"...};

// function to call when done loading everything
loader.onload = ... 

// function to call at each time it loades a single image of the list
loader.each = ... 

// function to call when unable to load one of the images 
loader.onerror = ... 

// set this to true to continue even if some of the images fail to load 
loader.ignoreErrors = true/false// Starts loading the images
loader.load();

After it's done loading the property ready will be set to true and you can access the images in the list object.

if(loader.ready)
    alert(loader.list.myImageName); // Image object

http://jsfiddle.net/uttZw/1