javascript - 如何设置特定的预加载器

Question

我想设置一个像这个网站上的预加载器：https ://www.freche-associes.fr 。我认为使用下面的代码我离结果不远，但我需要前进的想法提前谢谢你。

$(window).load(function(){
  $("#preloader").delay(1000).slideUp("slow"); 
  $(".text1").delay(900).fadeOut("slow"); 
  $(".line").delay(700).fadeOut("slow"); 
  $(".text2").delay(500).fadeOut("slow"); 
});

section{
  height: 500px;
  
}
#preloader{
 text-align: center;
 width: 100%
}
.line{
  width:150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div id="preloader">
        <h2 class="text1">My Consulting</h2>
        <hr class="line">
        <h3 class="text2">The best of...</h3>
  </div>
  <div class="content">All description!!!</div>
</section>

标签： javascripthtmlcss

Answer 1

利用window.addEventListener

    window.addEventListener('load', function () {
        $("#preloader").delay(1000).slideUp("slow");
        $(".text1").delay(900).fadeOut("slow");
        $(".line").delay(700).fadeOut("slow");
        $(".text2").delay(500).fadeOut("slow");
    })

       section{
            height: 500px;

        }
        #preloader{
            text-align: center;
            width: 100%
        }
        .line{
            width:150px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div id="preloader">
        <h2 class="text1">My Consulting</h2>
        <hr class="line">
        <h3 class="text2">The best of...</h3>
    </div>
    <div class="content">All description!!!</div>
</section>