jQuery Cycle Plugin：如何使用加载背景 gif 预加载第一张图像，然后淡入 Cycle Slideshow？

Question

我正在努力解决这个问题，也许你们中的一些人可以帮忙......

• 我在 www.theoribeiro.com 使用 jQuery Cycle 插件有一个带有大图像的主页幻灯片

• 图像很大，有时连接速度很慢（但即使在快速连接中），幻灯片开始的行为非常难看，会突然显示图像或加载一半。

• 我想确保在幻灯片开始之前至少加载 2 或 3 张图片，同时我想运行加载动画 gif，然后我想淡入第一张图片。

我在互联网和论坛上进行了很多搜索，并在我对 javascript 和 jQuery 知识有限的情况下尝试了很多东西，但无法找到解决方案。

任何帮助将不胜感激！！！

Answer 1

在加载图像之前不要初始化 Cycle 插件。使用像这样的预加载脚本 - http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html 并在您隐藏 2-3 张图像后，您可以初始化 Cycle 插件。因为您的图像已经在缓存中，所以显示一半的图像应该没有问题。默认情况下显示加载图像并在初始化 Cycle 插件后将其隐藏。

//回应第一条评论

您可以使用这样的插件 - http://plugins.jquery.com/project/ImageLoader 并使用 PHP 生成 javascript。例如：

$("#slideShow").imageLoader({
   images: [
    <?php
        // You can populate this array from readin a directory or manually it is your choice.
        $images = array('1.jpg', '2.jpg');
        $l = count($images);
        for(int $i=1; $i<$l; $i++) {
            echo ($i>0 ? ',' : '') . "{src: '" . $v . "'}";
        }
    ?>
    ]}, function () {
        $('#slideShow').cycle();
    });