javascript - 幻灯片放映在图像加载时开始，但在所有图像下载完成后才会显示第一张图像

Question

我正在使用 Cycle2 创建通过 PHP 从文件夹加载的图像幻灯片。您可以在这里查看实时站点:http://www.element17.com/ .

这些图像可以位于多个不同的文件夹(“相册”)中，因此我创建了以下函数来从一个相册切换到另一个相册:

$('.togglealbum').click(function() {
    $('#slideshow').cycle('destroy');
    $('#slideshow').html('<div class="cycle-overlay custom" id="info"></div>'+all[(this).id]);
    $('#slideshow').cycle();
    if ($('#play').is(':visible')) {
        $('#slideshow').cycle('pause');
    } else {
        $('#slideshow').cycle('pause').delay(3000).cycle('resume');
    }
    $('.togglelink,.toggleinfo').removeClass('active').addClass('fadein');
    $('#albums').fadeToggle('fast');
    $('.togglealbum').removeClass('cycle-pager-active');
    $(this).addClass('cycle-pager-active');
    $.cookie("currentalbum",(this).id,{expires:7});
});

我遇到的问题是，当加载新图像时(通过这一行: $('#slideshow').html('<div class="cycle-overlay custom" id="info"></div>'+all[(this).id]); )，幻灯片基本上立即开始播放，但在全部下载完毕之前不会显示图像。

这不一定是问题，但通常情况下，第一张图像可能会显示一两秒，然后过渡到下一张幻灯片(过渡的超时时间为 7 秒)。如果您的互联网连接速度较慢，我想您甚至可能看不到第一张幻灯片。

如何防止这种情况发生？我尝试过延迟幻灯片放映的开始，但这看起来确实很不优雅，而且我非常希望第一张图像在加载后立即显示，但我不知道该怎么做。

上面该行的相应代码如下:

<?php
if(isset($_COOKIE["currentalbum"])) {
    $currentalbum = $_COOKIE["currentalbum"];
} else {
    $currentalbum = "gallery/01_New";
}
$photolist = getphotolist($currentalbum);
$directory = 'gallery/*';
$subfolders = glob($directory);
foreach($subfolders as $subfolder) {
    if(!file_exists($subfolder."/thumbs")) {
        mkdir($subfolder."/thumbs", 0777);
    }
    $photos = glob($subfolder.'/*.[Jj][Pp][Gg]');
    foreach($photos as $photo) {
        $photoname = explode('.',basename($photo));
        $thumbnail = $subfolder.'/thumbs/'.$photoname[0].'_thumb.jpg';
        if (!file_exists($thumbnail)) {
            makethumb($photo,$thumbnail,150);
        }
    }
    $all[$subfolder] = getphotolist($subfolder);
}
$all_json = json_encode($all);
?>

非常感谢!

Answer 1

您可以使用数据属性来延迟幻灯片放映，直到加载所有图像:

$('#slideshow').html('<div class="cycle-overlay custom" data-cycle-loader="wait" id="info"></div>'+all[(this).id]);
             Edit: This attribute, but not here though: ^^^^^^^^^^^^^^^^^^^^^^^^

检查documentation了解更多选项。

编辑:愚蠢的错误，您需要将 data 属性添加到您的 #slideshow 元素，而不是它的子元素。

所以在原始的 html 中它会是这样的:

<div id="slideshow" data-cycle-loader="wait"></div>