CODEWITHSUNDEEP
jquerypreload
peterrattew
peterrattew

Reputation: 107

Preloading a large number of images

I know this question has been asked multiple times but all the answers seem to conflict each other. I have 500-600 images that i want to preload and put in a slider. What would be the most efficient way to achieve this?

Apologies again if this has been answered before.

Thanks

Upvotes: 1

Views: 605

Answers (3)

adeneo
adeneo

Reputation: 318202

There is no efficient way to preload 600 images, as the comment says, lazyloading would be better.

If you have to preload all of them, I would forget JS, and just place the images inside an element on your page and place that element off the screen, like left:-5000px etc. (display:none will not work).

Upvotes: 1

Pulkit Goyal
Pulkit Goyal

Reputation: 5654

Have a look at ImageLoader.

You can use it to load images and keep track of the loaded images. e.g. 

var imageLoader1 = new ImageLoader( {
    "images": [
            { "id":101, file: "path/image1.png" },
            { "id":102, file: "path/image2.png" }
        ],
        "onAllLoaded":function() { alert( "Images loaded" ); }
    } );

This is if you want to pre-load all the images. For 600 images, probably you shouldn't do this though.

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

Most times on a page of 600 images, the user most likely won't view all 600.. you should probably load the images as necessary. That many images would kill your bandwidth.

Upvotes: 1

Related Questions