Javascript 平滑滚动仍然滞后

Question

我正在这个页面上工作：http : //i333180.iris.fhict.nl/p2_vc/

在你们中的一些人的帮助下，我成功地添加了一个平滑滚动插件。

但是，当第一次打开页面时，我注意到很多滚动延迟。

我试过的

• 我将背景图片从 10 mb 压缩到 2.2 mb (1280 x 1024)。

• 我将背景图像移动到一个 div 元素，所以它只在内容上而不是在视频后面。

  <div id="div_section_img">
  <!-- all content -->
  </div>
  

  #div_section_img{
      background: url("nature.png") no-repeat center center fixed; 
  }
  

  • 这样做时，视频和内容部分之间出现了一条奇怪的“空白”线。我认为这是因为视频高度设置为100vh.

  我设法通过将margin-top设置更改为padding-topon#logo和footer元素来解决此问题。

  #logo {
      width: 410px;
      **padding-top: 120px;**
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0px;
  }
  
  footer {
      **padding-top: 100px;**
      width: 100%;
      height: 300px;
      background-color: rgba(25, 25, 25, 0.8);
  }
  

虽然所有这些都有所帮助，但仍然存在非常明显的滚动延迟。

我怎样才能摆脱滚动延迟？

平滑滚动.js

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

来自这个 css-tricks 教程

• 即使滚动前 5000 名也滞后

更新 尝试此脚本而不是其他脚本

        function start(){
        $(function() {
          $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html,body').animate({
                  scrollTop: target.offset().top
                }, 1000);
                return false;
              }
            }
          });
        });
        function videoEnded() {
            $('html,body').animate({
                scrollTop: $("#section").offset().top
            }, 1000);
        }
    }
    window.onload = start;

但还是落后

更新 2 添加

var loading = $('html');
loading.addClass('loading');
$(window).load(function(){
     loading.removeClass('loading');
});

代码有效，延迟仍然很明显

Answer 1

您需要在加载时隐藏页面，以便用户在所有内容加载完成之前不会开始滚动。

• 向隐藏 body 标签的标签添加一个类，并将加载图像添加到标签html的背景html
• 等待一切加载完毕
• 删除之前添加的类，将页面恢复到其自然状态。

var loading = $('html');
loading.addClass('loading');
$(window).load(function(){
    loading.removeClass('loading');
});

html.loading {
    height: 100%;
    background-image: url('http://i.imgur.com/HEAhF9v.gif'); /* Animated loading spinner image */
    background-position: center center;
    background-repeat: no-repeat
}
html.loading body {
    visibility: hidden;
    height: 100%;
    overflow: hidden;
}

<!-- For demo purposes only -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="//lorempixel.com/1024/768">