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>

Any specific reason for having the JS code in two separate script tags? — George, Nov 25 '16 at 10:20
Fair enough, personally I wouldn't recommend it [as there are reasons against it](http://stackoverflow.com/questions/6451156/multiple-versus-single-script-tags) but whatever. What does your html look like and are you doing any ajax calls? — George, Nov 25 '16 at 10:27
I have included my html which is very simple and yes, I already have the jQuery Ajax. And I'll keep the script tags in mind for more complex sites. — Lord Eww Lel, Nov 25 '16 at 10:32

Jordan Enev · Accepted Answer · 2016-11-25T12:13:19.483

2

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

edited Nov 25 '16 at 12:13

answered Nov 25 '16 at 10:36

Jordan Enev

16,904
3
42
67

I have also tried to do this previously which also did not work. – Lord Eww Lel Nov 25 '16 at 10:41
Maybe you missed something. Please check my answer here, because the author confirmed that it works: http://stackoverflow.com/a/39938004/4312466 – Jordan Enev Nov 25 '16 at 10:51
I'll have a look into it but just for reference I edited my post and you can see that the timeout function is working correctly. – Lord Eww Lel Nov 25 '16 at 10:56
Thanks for the answer but it still does not seem to work and I'm quite unsure why. Your code in theory should work. I included a link to my website if you're interested to look further into it. – Lord Eww Lel Nov 25 '16 at 11:20
I've updated my answer and add a fiddle. Make sure your code follows my idea. – Jordan Enev Nov 25 '16 at 12:16
I have finally figured out the problem! The jQuery .load was removed as of 1.8 so we now have to use .on 'load' function. – Lord Eww Lel Nov 26 '16 at 10:10
Thanks for the help though. – Lord Eww Lel Nov 26 '16 at 10:10

score -1 · Answer 2 · answered Nov 25 '16 at 10:40

-1

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

, if you are waiting the web page to load completely.

answered Nov 25 '16 at 10:40

Lego

15
2

Please read [this](http://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready) – George Nov 25 '16 at 10:42

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

2 Answers2