jquery plugin preloading images

Question

I made a jquery plugin for displaying images on: http://jsfiddle.net/wfARj/

One of his feature is preloading images:

function preload(){
        for (var i = firstIndex; i <= lastIndex; i++) {
            images[i] = new Image();
            images[i].onload = function(response){
                console.log(this.src + ' is successfully loaded!');
            }
            images[i].src = $(selector).eq(i).attr('href');
        }

} 

Problem is following, when some photo is large(>5MB), site loading i too slow.

I try with:

function preload(){
    setTimeout(function(){
            for(var i = firstIndex;i <= lastIndex;i++)
            {
                images[i] = new Image();
                images[i].onload = function(response){
                    console.log(this.src + ' is successfully loaded!');
                }
                if(elementType=='A') images[i].src = $(selector).eq(i).attr('href');
                else if(elementType=='IMG') images[i].src =            $(selector).eq(i).attr('src');
                else images[i].src = '';
            }
        }, 300);
}

But problem is still there... I want preload images in background, after page load. Detect full page load with window.bind load is not secure option. How i can make fix that?

thanks

Answer 1

but the settimeout inside the for loop closure so each load call gets its own timeout.

function preload(){
            for(var i = firstIndex;i <= lastIndex;i++)
            {
                setTimeout(function(){
                    images[i] = new Image();
                    images[i].onload = function(response){
                         console.log(this.src + ' is successfully loaded!');
                    }
                    if(elementType=='A') images[i].src = $(selector).eq(i).attr('href');
                    else if(elementType=='IMG') images[i].src =   $(selector).eq(i).attr('src');
                    else images[i].src = '';
                }, 300);
        }
}