How to write such a function, which tracked the page loading time and if the loading goes, for example more than 10 seconds, hide the preloader and show the page as it was at that moment.

jQuery(window).load(function(){ setTimeout(function () { var preloader = jQuery('.preloader_wrap'); var anim_preload = jQuery('.preloader'); anim_preload.fadeOut(500); preloader.delay(500).fadeOut('slow'); },2500); }); 
 .preloader_wrap{ position: relative; width: 400px; height: 400px; background-color: pink; } .preloader{ position: absolute; margin: auto; width: 222px; height: 222px; border-radius: 100%; border: 2px solid transparent; border-top-color: red; animation: spin 1s infinite linear; z-index: 1; } @keyframes spin { from{ transform: rotate(0deg); }to{ transform: rotate(-360deg); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="preloader_wrap"> <div class="preloader"></div> </div> <h1>Content</h1>

  • It should be considered from the moment when the house began to load or from the moment when the spinner started? - Skywave
  • When the preloader was launched and the doom started loading - JavAs

1 answer 1

I think your task should be solved solely by means of css, since before the page is fully loaded, it is difficult to guarantee the loading of scripts and their correct operation, but the css and markup for the preloader can be placed immediately after the opening body and they will be loaded first. For example:

 .preloader{ position:absolute; width:100vw; height:100vh; background:lightgrey; top:0; left:0; animation: hidePreloader; animation-duration: 0.5s; animation-delay: 3s; animation-fill-mode: forwards; } @keyframes hidePreloader { from {left:0vw;} to {left:-100vw;} } 
 <div class="preloader"> </div>

I hide the preloader after 3 seconds ( animation-delay: 3s; ), so that it does not wait so long. You can hide it in 10.