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/~demoester/brochure-test/

4

1 回答 1

1

This readme says what you need to simply catch inview event withoyt any direct interactions with scroll event.

Also, anyway, if you need to catch scroll event by some reason, the handler must be as lightweight as it can. For example, you should cache all jQuery objects in global variables outside handler instead of calling constructor each time.

于 2016-08-31T12:06:08.883 回答