0

写真が多くのワイヤレス デバイスで再生されるライブ イベントのスライドショーを作成しようとしています。ネットワークの混雑のため、トランジション前に指定された時間スライドショーを保持する機能を追加したいのですが、次の画像をプリロードし、画像が完全にロードされていない場合はトランジションをロードするまで保持します。残念ながら、私は Javascript の初心者であり、コーディングできることは限られています。

以下は、スライドショーを提供しているWebページのコードです。画像プールを更新するので、それは 5 分ごとにリロードして新しいスライドをスライドショーに提供する php スクリプトです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="refresh" content="300" >
<title>Slideshow</title><!-- -->

<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#myslides').cycle({
        fit: 1, pause: 1, timeout: 4000
    });
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />

<body>
<?php
$directory = 'images/slideshow';    
try {       
    // Styling for images   
    echo '<div id="myslides">'; 
    foreach ( new DirectoryIterator($directory) as $item ) {            
        if ($item->isFile()) {
            $path = $directory . '/' . $item;   
            echo '<img style="width:600px;height:600px;" src="' . $path . '"/>';    
        }
    }   
    echo '</div>';
}   
catch(Exception $e) {
    echo 'No images found for this slideshow.<br />';   
}
?>
</body>
</html>

サイクルプラグインには関数を呼び出すことができる before オプションがあることは知っていますが、それは正しい方向だと思いますが、それを使用してプリロード関数を呼び出す方法がわかりません。

どんな助けでも大歓迎です。

4

2 に答える 2

0

コード全体を提供するつもりはありませんが、それを行う方法についていくつかのアイデアがあります。

1、タイムアウトの代わりに次/前のボタン オプションでサイクルを使用します。次の画像の読み込みをトリガーするボタンを非表示にします。

2) display/opacity を none/transparent、幅 0 などに設定した新しい画像要素を追加して、画像を表示しないようにします (ただし、キャッシュにはロードします)。ディスプレイがオフの場合、ロードされないと思いますが、わかりません。

3）画像の読み込み機能を使用して、画像の読み込みがいつ終了したかを確認し、次のリンク/機能をサイクルで手動でトリガーします。

于 2013-09-08T17:45:37.357 に答える