javascript - 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

This readme说出你需要简单地捕捉 inview 不与 scroll 事件进行任何直接交互的事件。

此外，无论如何，如果您出于某种原因需要捕获 scroll 事件，则处理程序必须尽可能轻量级。例如，您应该将所有 jQuery 对象缓存在处理程序外部的全局变量中，而不是每次都调用构造函数。