javascript - 预加载 JavaScript

Question

我正在尝试制作预加载器，我当前有此代码，但它在页面加载之前没有显示预加载器。

$(document).ready(function(){
        $(".preloader-wrapper").show();
        $("body").hide();
     });

$(window).load(function(){
  $(".preloader-wrapper").fadeOut("slow", function(){
    $("body").fadeIn("slow");
  });
});

编辑:明白了。

setTimeout(function() {
  $('#preloader').fadeOut('slow', function() {
    $(this).remove();
  });
}, 2000);

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}

Answer 1

您可以将其首先加载并放在顶部。然后在 dom 加载后将其删除即可。

setTimeout(function() {
  $('#preloader').fadeOut('slow', function() {
    $(this).remove();
  });
}, 2000);

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>