JQuery/CSS анимация переходов замедляет страницу

Question

У меня есть страница, где пользовательские прокрутки и анимации отображаются, когда они видны на странице, и скрываются, когда их нет. Это происходит всякий раз, когда страница прокручивается, но кажется, что она потребляет слишком много вычислительной мощности, а страница прокручивается довольно статично.

Вот код, который я использую:

$('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/

Answer 1

Это readme говорит, что вам нужно просто поймать inview событие без каких-либо прямых взаимодействий с scroll событие.

Кроме того, в любом случае, если вам нужно поймать scroll Событие по какой-то причине должно быть настолько легким, насколько это возможно. Например, вы должны кэшировать все jQuery объекты в глобальных переменных вне обработчика вместо вызова конструктора каждый раз.