php - 如何预加载一组图像，然后启动图像幻灯片？

Question

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

有谁知道我该怎么做？因为我在网上找到的只是预加载了一张图片，但没有说明之后如何开始我的幻灯片放映。

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

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

谢谢！

Answer 1

这应该工作

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

Answer 2

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

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

来源：加载图像的 jQuery 事件

Answer 3

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

这似乎是预缓存图像的一种优雅方式。