如何使jQuery加载屏幕视图至少3秒钟？

Question

I just created my own loading screen with this code:

HTML CODE: <div class="loader"></div>

CSS CODE: .loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url(../Images/page-loader.gif) 50% 50% no-repeat rgb(249,249,249);}

jQuery CODE: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



AND
             $(window).load(function() {
             $(".loader").fadeOut("slow");})

Each time the page loads, the loading screen only displays for a fraction of a second. Im trying to display the loading screen at least 3 seconds. What jQuery code should I add?

Answer 1

use setInterval

$(window).load(function() {
  setInterval(function() {
    $(".loader").fadeOut("slow")
  }, 3000);
});

Answer 2

To delay the fadeOut action you can use the delay() function in jQuery https://api.jquery.com/delay/

This will delay your fadeout by 3s (3000ms).

$(window).load(function() {
  $(".loader").delay(3000).fadeOut("slow");
})