Search code examples
jqueryloaderpageload

jquery - removing loading div after the page has loaded

So I created a simple method to put a loader. I put a loader already and put the opacity of a main container tag to 0.4 . but when page loads, my javascript doesn't remove the loader and set opacity to 1. So my code here:

Important Notes:
I use JQuery version 2(I don't know the exact) 

$(document).ready(function() {
       $(this).load(function() {
          $('.progress').hide();
          $('body').css("opacity", "1");
       });
    });
Solution

  • You should use $(window).load() not $(document).load()

    $(document).ready(function(){
  $(window).load(function(){
    alert("This can run");
  });
  $(this).load(function(){
    alert("This cannot run");
  });
  $(document).load(function(){
    alert("This cannot run too");
  });
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>