jQuery .load(function) and .addClass in Order to Remove Preloader is Not Working

Question

I am currently using jQuery "addClass" and "removeClass" to remove the preloader. I want the preloader page to be removed when all web content is loaded. Setting a timeout function seems to work fine but I cannot seem to get to do the same when the entire site is finished loading, as in real time loading. Some help is highly appreciated.

//..HTML..//

<div class="loader-wrapper">
</div>

//..CSS..//

.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.loaded .loader-wrapper {
-webkit-transform: translateY(120%);
-ms-transform: translateY(120%);
transform: translateY(120%);
-webkit-transition: all 1s 0.5s ease-out;
transition: all 1s 0.5s ease-out;
}

//..jQuery..//

<script>
  $("body").removeClass('loaded');
</script>

<script>
$( window ).load(function() {
 $("body").addClass('loaded');
});
</script>


//..For reference this works perfectly..//

<script>
$(document).ready(function() {

setTimeout(function() {
$("body").addClass('loaded');
}, 1800)

});
</script>

Answer 1

You can use a library, that validates when all images are loaded. For example imagesLoaded .

So your code may look something like that:

 // DOM is ready $(function() { // We have to make sure that all of the images are loaded in the container $('body').imagesLoaded( function() { // Images are loaded $('.loader').hide(); $('img').show(); }); }); 

 img { display: none } 

 <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script> <span class='loader'>Loading ...</span> <img width="200" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" /> 

Answer 2

You can use the $(document).ready(function(){ // code  }); 

，如果您正在等待网页完全加载。