Question

我注意到$（window）.scroll的jQuery滚动绑定往往会使页面滞后很多。例如，当我使用以下脚本滚动浏览它时，我的页面上有元素更改样式：

$(window).scroll(function() {
     var bottom_of_window = $(window).scrollTop() + $(window).height();
     $('.ElementsToBeChanged').each(function() { 
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                //Add my styles
            }
        });

});

可以理解的是，它使网站变得迟钝，因为它一直在滚动上运行，但是当对象滚动过去时，我没有遇到任何触发事件的替代方法。这些触发滚动事件的网站看起来很常见;他们用什么来绕过这种滞后？

Answer 1

什么会降低你的表现速度不是滚动功能本身，而是你在每个滚动事件中为每个项目进行大量计算的事实。

但尽管如此，我还是看不到屏幕上有20个元素的性能下降。

尝试将window对象缓存为变量[例如：win = $(window)]，并使用每个函数中的el代替this。

不要直接使用jQuery更改css，而是尝试添加/删除类。

不要像其他人提到的那样使用deounce，因为在你停止滚动之前它不会触发。您正在寻找的内容称为throttling。

这就是我想出的内容，它可以很好地与我的电脑上的20个元素配合使用：

＆＃13;

var win = $(window);

win.scroll(function() {
     var bottom_of_window = win.scrollTop() + win.height();
     $('.ElementsToBeChanged').each(function(index,el) { 
            var bottom_of_object = $(el).offset().top + $(el).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(el).addClass('red');
            }else{
            		$(el).removeClass('red');
            }
        });

});

＆＃13;

.ElementsToBeChanged{
  margin:100px;
  height:200px;
  border:1px solid black;
  transition:2s;
}

.ElementsToBeChanged.red{
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>

＆＃13;

最后，只需使用Skrollr.js或ScrollMagic

等插件即可

更快的替代$（window）.scroll？

1 个答案: