0

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]);）ロードされると、スライドショーは基本的にすぐに再生を開始しますが、すべてダウンロードされるまで画像は表示されません。

これは必ずしも問題ではありませんが、通常、最初の画像が 1 ～ 2 秒間表示された後、次のスライドに移行します (移行は 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);
?>

どうもありがとう！

4

1 に答える 1

2

データ属性を使用して、すべての画像が読み込まれるまでスライドショーを遅らせることができます。

$('#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。

したがって、元の html では次のようになります。

<div id="slideshow" data-cycle-loader="wait"></div>
于 2013-11-14T18:58:23.223 に答える