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

Question

我正在创建一个包含5个帧的幻灯片（每个都有自己的图像幻灯片），图像很大，每个帧中的前几个图像需要一些时间才能加载（其余的图像都是装得很快）。所以我想我可以预加载一个简单的黑色图像（背景为黑色），然后一旦我知道图像已经加载就开始我的幻灯片放映。此外，幻灯片显示图像是动态的，即他们的网址每天都在变化。

有谁知道我怎么能这样做？因为我在网上发现的只是预加载图像，但在此之后没有说明如何开始播放幻灯片。

如果有人有更好的解决方案，请告诉我们！

仅供参考，对于幻灯片，我使用PHP将图像网址提取到文件中，并使用JavaScript从中读取它们并在幻灯片中显示它们。

谢谢！

Answer 1

预加载图像的一个好方法是使用位置为绝对的css将它们加载到帧外：我记得使用display：none读取它;它不会被Safari下载。

这似乎是precache图像的优雅方式。

Answer 2

“Per Paul Irish，用于检测图像加载完成事件的规范插件现在位于：

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

来源：jQuery event for images loaded

Answer 3

这应该有效

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