2

Web トランジションを使用して画像をスライドさせるカルーセル スクリプトを作成しています。

これは、それがどのように機能するかを非常に単純化したフィドルです。 http://jsfiddle.net/tUhZe/6/

各移行の最初に発生するコストのかかる再描画をどのように減らすことができるかについて、誰かが明るいアイデアを持っているかどうか知りたかったのですか?

このカルーセルに 50 個の画像を追加しようとしましたが、パフォーマンスに重大な問題が発生しました。

    window.setInterval( function () {
        var element = $('#container'),
            active = $('.active'),
            next = active.next('.slide');
        if (!next.length) {
            next = element.find('.slide:eq(0)');
        }

        // Move next image into position, ready to slide
        next.addClass('next');

        // Slight delay for next image to move into position
        window.setTimeout( function () {
            // Start moving active image out
            active.addClass('prev');

            // Start moving next image in
            next.addClass('active')
                .removeClass('next')
                .bind('webkitTransitionEnd', function () {

                    next.unbind('webkitTransitionEnd');

                    // Move offscreen
                    active.removeClass('active prev next');

                    // Reassign active
                    active = next;
                });
        }, 100);

    }, 2000);

一言で言えば、これはスクリプトがどのように機能するかです:

  1. アクティブな画像が表示されます (指定されたクラス「アクティブ」)。他のすべての画像 (クラス「アクティブ」を除く) はオフスクリーンです (上: 9999px)。
  2. トランジションの準備として、アクティブな画像の横に次の画像が移動されます。
  3. アクティブな画像クラスと次の画像クラスが変更され、両方が同時に左から右にスライドします。

  4. トランジションの最後に、アクティブな画像が画面外に配置されます。

    前もって感謝します。

4

1 に答える 1

1

残念なことに、多くのブラウザーとコンピューター ハードウェアの組み合わせでは、一度に 50 個のフルスクリーン イメージをウィンドウにロードする準備が整っていません。

しかし、最近同様のカルーセルを作成したところ、背景画像と単純なロジックを巧みに使用することで、パフォーマンスの問題を完全に回避できることがわかりました。

画面上に非表示の画像が多すぎるとブラウザに問題が発生しますか? したがって、 を含む要素がアクティブであるか、前後の要素のいずれかである場合にのみ読み込まれる背景画像を含むスパンを単純に使用するとします。

私は言葉が苦手なので、お見せしましょう。

http://jsfiddle.net/DUWMy/

<div class="slideshow">

    <span class="image-1 active"></span>
    <span class="image-2"></span>
    <span class="image-3 prev"></span> 

</div>



.slideshow .prev.image-1,
.slideshow .active.image-1{ background-image:url('http://lorempixel.com/output/technics-q-c-400-300-7.jpg'); }
.slideshow .prev.image-2,
.slideshow .active.image-2{ background-image:url('http://lorempixel.com/output/nightlife-q-c-400-300-5.jpg'); }
.slideshow .prev.image-3,
.slideshow .active.image-3{ background-image:url('http://lorempixel.com/output/city-q-c-400-300-7.jpg'); }

上記のフィドルでは、簡単なスライドショーをまとめましたが、注意すべき重要なことは、css では、active または prev のクラスが存在しない限り、背景画像が適用されないことです。

http://jsfiddle.net/DUWMy/1/

上記のフィドルは、すべての要素を画面に表示するだけです。要素が prev のクラスを失い、アクティブになるとすぐに、背景画像が失われることがわかります。これは、画面上の画像が少なくなることを意味し、余分な遅延が発生することはありません.

すでに別の解決策を見つけているかもしれませんが、これは覚えておくと便利な方法です。レスポンシブレイアウトにも対応。

于 2013-04-09T22:51:08.927 に答える