Cache dynamic images from array before page loads using javascript

Question

I am trying to make 4 sliding galleries but I need to preload (cache) all images behind a splash screen before displaying the images in gallery form. I have been trying to use "jPreLoader v2 - http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images" but with no luck.

The code below is how I have been trying to preload all images from each gallery directory on to a single gallery behind jpreloader then once load complete remove the whole gallery and display each gallery at a time.

var pictures =  [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    .......,
    "30.jpg"
 ]

$(window).load(function(){

preLoad();

function preLoad(){
    var max = 30;
    var pic;
    picture = '<table id="table" style="dipslay:table;"><tr>';
    for (var i=0;i < max; i++){
        if(i < 30){
            pic = "images/art/"+pictures[i];
            appendCell(pic);
        }
        if(i < 17){
            pic = "images/street/"+pictures[i];
            appendCell(pic);
        }
        if(i < 19){
            pic = "images/doc/"+pictures[i];
            appendCell(pic);
        }
        if(i < 16){
            pic = "images/commercial/"+pictures[i];
            appendCell(pic);
        }
    };
    picture += '</tr></table>';
    $('#imageScroller').append(picture);
}

function appendCell(pic){
    picture +="<td class='image'><img class='i' src='"+pic+"'></td>";
    return;
}
});

Im not quite sure how to implement the jpreloader on a dynamic image loading loop above instead of already inserted into the dom.

$(document).ready(function () {
$('body').jpreLoader();
});

Thanks.

Please link to the plugin you're using, the name alone doesn't help much. — Bergi
– Bergi, Commented Dec 21, 2012 at 0:48
Have you tried $('#imageScroller').append(picture).jpreLoader();? — Bergi
– Bergi, Commented Dec 21, 2012 at 0:51

Bruno · Accepted Answer · 2012-12-21 02:07:56Z

7

Custom progress bar that updates as images are downloaded

var pictures = [
                    "1.jgp",
                    "2.jpg"
                ];

var loadedSoFar = 0;

function loaded( ) {
    // do stuff
}

function updateProgress( ) {

    loadedSoFar++;

    var newWidth = $("#progress").width() * ( loadedSoFar / pictures.length );
    $("#bar").stop( true, true );
    $("#bar").animate({ width: newWidth }, 500, function( ) {
        if( loadedSoFar === pictures.length ) { loaded() }
    });
}

for( var i = 0; i < pictures.length; i++ ) {
    var img = new Image();
    img.src = pictures[ i ] + i;

    img.onload = function( ) {
        updateProgress();
    }
}

Demo here

edited Dec 21, 2012 at 2:07

answered Dec 21, 2012 at 1:14

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Wayne Over a year ago

Why wait for one to load before you load the next one? This makes things much slower since the browser can download multiple images in parallel if you let it.

Bruno Over a year ago

what if you have 30 images 1200px by 1200px. If they are relatively small then they should download at a reasonable speed. Although I can see the merit of what you are saying :)

Alex Wayne Over a year ago

Doesn't matter. This is simply not an optimization you need to do. Browsers are very good at downloading things. A webpage is simply a list of assets to download, and it's optimized to do that well. What problem is being solved by this forced queueing?

str11 Over a year ago

We need the images pre loaded in order to get the slider dimensions to get make the slider function correctly. With that img array is that used just to load all the images? Can i go back to using the picture array + dir after pre load?

str11 Over a year ago

Got it working like a charm had to add all images into one array and then send it thru ur code as i had 4 folders with images named up to 30 which that currently couldnt support

Collectives™ on Stack Overflow

Cache dynamic images from array before page loads using javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related