CODEWITHSUNDEEP
javascriptjquerycsstimepreloader
caleb1
caleb1

Reputation: 11

Set maximum time for preloader

Does anyone know of a way to set a maximum time that a preloader can display? In the event that someone has a slow connection, it would be useful to make the preloader disappear after a few seconds so it does not show forever. Here is the code I am currently using for the preloader.

    // 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>

Upvotes: 0

Views: 737

Answers (1)

SKJ
SKJ

Reputation: 2326

You rather just use $(document).ready

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

Because : The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. https://www.w3schools.com/jquery/event_load.asp

Instead of using > jQuery( '.et-bfb' ), You can use "$".

// 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>

Upvotes: 0

Related Questions