视差效果跳跃

Question

我在我的网站上有视差效果,但在滚动时它似乎相当跳跃如下:

这是代码:

    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正在显示此问题.

Answer 1

我的代码中没有看到任何"错误".我敢打赌原因是你的图像的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>