0

Web ページのパフォーマンスを向上させるために、このコードを作成しました。true の場合autoplay.v.mystart、2 つのスライドショーのスライドとアニメーションが再生されない、という条件を作成しました。私の目的は、ユーザーがスクロールしているときにアニメーションを停止し、ユーザーがスクロールを停止している間にアニメーションを再アクティブ化することです。未使用のアニメーションを停止したり、未使用のものを非表示にしたりする人の話を聞いたので、Web ページの負荷を減らし、Web ページのスクロールをよりスムーズにすると思います。ただし、スムーズではなく、少し遅れていることがわかります。スクロール イベント リスナを使用していて、timer/cleartimeout も多くのリソースを消費しますか? ウェブページの負荷を減らすために、私の目的を達成するための最良の方法は何ですか? このコードを削除する必要があるかどうかを考えています。それはもったいない、決定できません

var saviour = {
    '$mywrapper' : $('#wrapper'),
    'mychecked':false,
    run : function(){
        var wrapper_timer;
        saviour.$mywrapper.scroll(function(){
            if(saviour.mychecked==false){
                saviour.mychecked = true;
                autoplay.v.mystart = false;
                clearTimeout(wrapper_timer);
                setTimeout(function(){saviour.mychecked=false},1000);
                wrapper_timer = setTimeout(function(){
                autoplay.v.mystart = true;
                console.log('autoplay restart')
                },4000);
                console.log('check');
            }
        });
    }
}
saviour.run();
4

1 に答える 1

1

最初に、これに基づいて「scrollstart」および「scrollstop」イベントを提供する jQuery アドオンを示します。これは、初期バージョンの jQuery 用に作成され、最新化する必要がありました。

(function($, latency) {
    var special = $.event.special;
    special.scrollstart = {
        setup: function() {
            var timer;
            function handler(evt) {
                if (timer) {
                    clearTimeout(timer);
                } else {
                    evt.type = 'scrollstart';
                    $.event.handle.apply(this, arguments);
                }
                timer = setTimeout(function() {
                    timer = null;
                }, latency);
            };
            $(this).on('scroll.start', handler);
        },
        teardown: function() {
            $(this).off('scroll.start');
        }
    };
    special.scrollstop = {
        setup: function() {
            var timer;
            function handler(evt) {
                var _self = this,
                    _args = arguments;
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function() {
                    timer = null;
                    evt.type = 'scrollstop';
                    $.event.handle.apply(_self, _args);
                }, latency);
            };
            $(this).on('scroll.stop', handler);
        },
        teardown: function() {
            $(this).off('scroll.stop');
        }
    };
})(jQuery, 300);

このバージョン:

  • .bind()と.unbind()を.on()とに置き換え.off()、さらに関連する単純化を行います。
  • 自己実行関数ラッパーへのパラメーターとしてレイテンシーを指定できるようにします。

「scrollstart」および「scrollstop」イベント検出を使用すると、アニメーションを開始および停止するためのアプリケーション スニペットは次のように単純になります。

$(window).on ('scrollstart', function(e) {
    allowAnim = false;    
    stopAnim();
}).on ('scrollstop', function(e) {
    allowAnim = true;
    anim();
}).trigger('scrollstop');

ここでanim()、 とstopAnim()はアニメーションを開始および停止するための関数でありallowAnim、外側のスコープのブール変数です。

レイテンシーを調整したい場合があります。300 が最小許容値であり、非常に反応が良いことがわかりました。大きい 値が大きいほど反応が鈍くなりますが、スクロールの途中でアニメーションが再開するのを防ぐことができます。

デモ

于 2012-11-28T15:28:41.010 に答える