如何预加载一组图像，然后开始图像幻灯片播放？

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!

Answer 1

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.

Answer 2

"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

Answer 3

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];
}