How to preload a set of images and then start the image slideshow?

Question

I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.

Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.

Or if anyone has a better solution, please let me know!

FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.

Thanks!

Are you using a Javascript plugin for the slideshow, or did you write your own using `setInterval`? — Zach Rattner, Mar 27 '13 at 14:37
This is what you need: http://stackoverflow.com/a/2392448/494643 — Benubird, Mar 27 '13 at 14:39

score 0 · Answer 1 · answered Mar 27 '13 at 14:39

0

A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.

This seems to be an elegant way to precache the images.

answered Mar 27 '13 at 14:39

Ogelami

366
1
14

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:

https://github.com/desandro/imagesloaded"

Source: jQuery event for images loaded

edited May 23 '17 at 11:43

Community

1
1

answered Mar 27 '13 at 14:41

Parthik Gosar · Answer 3 · 2013-03-27T18:53:32.673

0

This should work

/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
    var oImage = new Image ();
    oImage.onload = function ()
    {
        nLoadCount++;
        if(nLoadCount == arrUrls.length)
        {
            /*Show your content here*/
        }
    }
    oImage.src = arrUrls[i];
}

edited Mar 27 '13 at 18:53

answered Mar 27 '13 at 14:55

Parthik Gosar

10,998
3
24
16

What exactly happens in /*Show your content here*/ ? I thought the urls have to be added as src for the images and then only displayed? – Kitty1911 Mar 27 '13 at 15:59
the above code just does the preloading part and not the displaying part. After running this code, all the images will be preloaded, you can apply the urls to any images (independent of this code) and the browser will load these images from cache. – Parthik Gosar Mar 27 '13 at 18:56

How to preload a set of images and then start the image slideshow?

3 Answers3