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

Question

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

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

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

• 我想确保在幻灯片开始之前至少加载了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();
    });