jquery - 视差效果跳跃

我的网站上出现了视差效果，但在滚动时看起来像是跳动的，如下所示:



这是代码:

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var pos = $(this).offset().top;
          var scrolled = $(window).scrollTop();
          jQuery('*[class^="prlx"]').css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });

*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

更新:在进一步测试中，它似乎在Chrome中可以完美运行，但是Safari和FireFox显示了问题。

最佳答案

我看不到您的代码中有任何“错误”。我敢打赌，原因是图像的2,1MB，从2500px调整为窗口宽度。考虑到浏览器正在尝试“绘制”图像并计算每个滚动值上的位置...

我会使用CSS的背景位置来处理它，但与您保持一致，问题似乎集中在性能上。您在JS上执行的操作效率低下，因为首先选择所有'*[class^="prlx"]'循环，然后在每个循环中再次将它们应用于所有位置，通过再次查找它们来重新计算位置。在遍历元素时，可以使用this元素并对其进行更改。将$ this保存到变量只是为了避免在同一元素上两次应用jQuery并节省一些资源，但是在这种情况下可能并不那么重要。

在我的笔记本电脑上，我看不到它跳动。尝试使用较小的图像，看看它是否可以改善性能。

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var $this = $(this);
          var pos = $this.offset().top;
          var scrolled = $(window).scrollTop();
          $this.css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });

*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

关于jquery - 视差效果跳跃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34337128/