1

私は、responseslides.jsを使用して結婚式の写真を表示するための小さなレスポンシブ画像スライダーと、垂直方向の画像を処理するための小さなスクリプトをコーディングしてきました（ブラウザーのビューポートに基づいて最大の高さを設定します）。あなたはそれをhttp://johnandalex.us/photosで見ることができますそれは2つの例外を除いて、私が望むように最終的にほとんど機能しています：

  1. 写真が表示され、しばらくしてからサイズが変更されます（ブラウザウィンドウが写真のフルサイズよりも小さい場合）
  2. 前/次の矢印は、写真が完全に読み込まれるまで表示されません（100を超える画像があるため、特に低速の接続では時間がかかります）

これら2つの項目を改善する方法について何かアイデアはありますか？私はHTMLとCSSに完全に慣れていますが、JSに関しては完全な初心者です。

ありがとう。

4

2 に答える 2

2

$（document）.readyが起動するまでスライドショーコンテナを非表示にしてから、コントロールを表示します。ページの読み込み中にローダーアニメーションGIFを表示できます。

編集：

この効果を実現する方法の例を次に示します。

まず、スライドショーを含むULでdisplay：noneを指定する必要があります。

<ul class="rslides rslides1" style="display:none;">

次に、ドキュメントの準備ができた状態でスライドショーコンテナを表示し、すでに行ったようにプラグインを初期化します。

  $(document).ready(function () {

    $(".rslides").show();

    $(".rslides").responsiveSlides({
        auto: false,
        speed: 700,
        timeout: 3000,
        nav: true
    });
  });
于 2012-07-05T20:45:56.980 に答える
0
  1. 可能であれば、常に高さと幅を画像に設定する必要があります。
于 2012-07-05T20:46:05.813 に答える