0

ユーザーがスクロールすると、アニメーションがページに表示されているときに表示され、表示されていないときに非表示になるページがあります。これは、ページがスクロールされるたびに発生しますが、処理能力が過度に消費されているようで、ページはかなり静的にスクロールします。

私が使用しているコードは次のとおりです。

$('body').scroll(function(){


        $('.anim').on('inview', function (event, visible) {
          if (visible == true) { 
            // element is now visible in the viewport
            $(this).removeClass("hidden");
            $(this).addClass("visible animated fadeIn");
          } else {
            // element has gone out of viewport
            $(this).removeClass("visible animated fadeIn");
            $(this).addClass("hidden");
          }
        });


        $('.anim_bounceIn').on('inview', function (event, visible) {
          if (visible == true) { 
            // element is now visible in the viewport
            $(this).removeClass("hidden");
            $(this).addClass("visible animated bounceIn");
          } else {
            // element has gone out of viewport
            $(this).removeClass("visible animated bounceIn");
            $(this).addClass("hidden");
          }
        });

        $('.anim_bounceInUp').on('inview', function (event, visible) {
          if (visible == true) { 
            // element is now visible in the viewport
            $("#"+$(this).attr("relID")).removeClass("hidden"); 
            $("#"+$(this).attr("relID")).addClass("visible animated bounceInUp");
          } else {
            // element has gone out of viewport
            $("#"+$(this).attr("relID")).removeClass("visible animated bounceInUp");
            $("#"+$(this).attr("relID")).addClass("hidden");
          }
        });

     });

私の知る限り、スクロール時に関数を起動するのはあまり効率的ではありません。これを達成するためのより良い方法はありますか?

これが問題のページです。ただのテスト領域です...

http://185.116.213.24/~demotester/brochure-test/

4

1 に答える 1

1

この readmeinviewには、イベント との直接的なやり取りを行わずにイベントを単純にキャッチするために必要なものが記載されていますscroll。

また、なんらかの理由でイベントをキャッチする必要がある場合はscroll、ハンドラーをできる限り軽量にする必要があります。たとえば、jQueryコンストラクターを毎回呼び出すのではなく、ハンドラーの外部のグローバル変数にすべてのオブジェクトをキャッシュする必要があります。

于 2016-08-31T12:06:08.883 に答える