图像加载时开始幻灯片放映，但直到全部下载后才显示第一张图像

问题描述

我正在使用Cycle2来创建通过PHP从文件夹加载的图像的幻灯片显示.您可以在此处查看实时网站: http://www.element17.com/.

I'm using Cycle2 to create a slideshow of images loaded from a folder via PHP. You can see the live site here: http://www.element17.com/.

这些图像可以位于许多不同的文件夹(相册")中，因此我创建了以下功能，可以从一张专辑切换到另一张专辑:

These images can be in a number of different folders ("albums"), and so I've created the following function to switch from one album to another:

$('.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]);)加载新图像时，幻灯片放映基本上立即开始播放，但是直到所有图像全部下载后才显示图像.

The problem I'm having is that when the new images are loaded in (via this line: $('#slideshow').html('<div class="cycle-overlay custom" id="info"></div>'+all[(this).id]);), the slideshow starts playing basically immediately, but no images are displayed until they're all downloaded.

这不一定是问题，除了通常似乎发生的情况是，显示第一张图像大约一秒钟或两秒钟，然后过渡到下一张幻灯片(过渡时间为7秒).如果您的网络连接速度较慢，我想您可能甚至看不到第一张幻灯片.

This isn't necessarily a problem except that usually what seems to happen is that the first image is displayed for maybe a second or two and then transitions to the next slide (the transitions are on a 7 second timeout). If you were on a slower internet connection, I suppose you might not even see the first slide.

如何防止这种情况发生?我试图延迟幻灯片的开始，但是这看起来确实不太好，我非常希望第一张图像在加载后立即显示，但是我不确定该怎么做.

How can I prevent this from happening? I've tried to delay the start of the slideshow but this seems really inelegant, and I'd greatly prefer for the first image to be shown as soon as it's loaded, but I'm not sure how to do that.

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

The corresponding code for that line above follows:

<?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);
?>

非常感谢！

推荐答案

Yo可以使用data属性将幻灯片放映延迟到所有图像加载完毕为止.

Yo can use a data attribute to delay the slideshow until all images are loaded:

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

查看文档以获取更多选项.

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

Silly mistake, you need to add the data attribute to your #slideshow element, not to a child of it.

因此原始html中将是这样的:

So it would be something like this in the original html:

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

这篇关于图像加载时开始幻灯片放映，但直到全部下载后才显示第一张图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！