设置预加载器的最长时间

Question

有谁知道设置预加载器可以显示的最长时间的方法吗？如果有人连接速度很慢，让预加载器在几秒钟后消失会很有用，这样它就不会永远显示。 这是我目前用于预加载器的代码。

    // makes sure the whole site is loaded
    jQuery(window).load(function () {
        "use strict";
        // will first fade out the loading animation
        if(  jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0  ){ 
            jQuery(".status").fadeOut();
            // will fade out the whole DIV that covers the website.
            jQuery(".preloader").delay(1000).fadeOut("slow");
        }else{
            jQuery(".preloader").css('display','none');
        }
    }); 

.preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fefefe;
   z-index: 100000;
   height: 100%;
   width: 100%;
   overflow: hidden !important;
}

.preloader .status {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   background-image: url(http://monticellomansion.com/wp-content/uploads/2021/04/dbf29347459a27eb6736f2164539440e.gif);
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   background-size: cover;
   margin: -50px 0 0 -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preloader">
<div class="status"></div>
</div>

Answer 1

你宁愿只使用 $(document).ready

https://learn.jquery.com/using-jquery-core/document-ready/

因为：load() 方法在 jQuery 版本 1.8 中已被弃用，并在 3.0 版本中被删除。 https://www.w3schools.com/jquery/event_load.asp

你可以使用“$”来代替>jQuery('.et-bfb')。

// makes sure the whole site is loaded
$(document).ready(function() {
  // will first fade out the loading animation
  if ($( '.et-bfb' ).length <= 0 && $( '.et-fb' ).length <= 0) { 
    $(".status").fadeOut();
    // will fade out the whole DIV that covers the website.
    $(".preloader").delay(1000).fadeOut("slow");
  } else {
    $(".preloader").css('display','none');
  }
});

.preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fefefe;
   z-index: 100000;
   height: 100%;
   width: 100%;
   overflow: hidden !important;
}

.preloader .status {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   background-image: url(http://monticellomansion.com/wp-content/uploads/2021/04/dbf29347459a27eb6736f2164539440e.gif);
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   background-size: cover;
   margin: -50px 0 0 -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preloader">
  <div class="status"></div>
</div>