Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

multiple $(document).ready and $(window).load in $(document).ready

Tags:

I got 2 questions. First of all, this is not my work. I'm currently looking at somebody else's JavaScript files. I can't give the exact code but I can show what I'm wondering.

In the JavaScript files I see a lot of $(document).ready(function(){});. I know what $(document).ready does, the callback function will be called when the DOM tree is loaded. Is there any reason why somebody would use more than one $(document).ready callback? I don't get the point.

Also, another thing I saw was a $(window).load inside a $(document).ready, like this:

$(document).ready(function() {
    $(window).load(function() {
         //...
    });
});

From what I know, $(window).load() is called when everything of a page is loaded, like assets and images etc. I would think $(window).load() is the last thing called, after $(document).ready. Is there any time where $(window).load is called BEFORE $(document).ready and is there any reason why you would put a $(window).load inside a $(document).ready?

like image 636
Joshua Bakker Avatar asked Feb 20 '17 09:02

Joshua Bakker


People also ask

What is the difference between $( window .load and $( document .ready functions?

The key difference between $(document). ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc.

Can I have multiple document .ready called in a single page?

We can have multiple document. ready() function in our code but only one body.

Can I have multiple document ready functions?

Yes we can do it as like I did in below example both the $(document). ready will get called, first come first served.

Can I call document ready multiple times?

Calling $(document). ready() multiple times. The answer is that yes, it can be called multiple times. For example, you might have several Javascript library files and each of them may need to do something after the DOM has loaded.


1 Answers

Yes, jQuery grants that ready event will be called before load. Even in IE8- (where DOMContentLoaded is not supported) it works in that way. But let's look at the following code:

<!doctype html>

<title>Ready vs load test</title>

<style>body {white-space: pre}</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
  ~function () {
    function log(msg) {
      document.body.innerHTML += msg + "\n";
    }

    function handler(msg) {
      return function () {
        log(msg);
      }
    }

    $(window).load(handler("5. load #1"));
    $(document).ready(handler("1. ready #2"));
    $(window).load(handler("6. load #3"));
    $(document).ready(handler("2. ready #4"));
    $(document).ready(function () {
      log("3. ready #5");
      $(window).load(handler("8. load #6"));
    });
    $(document).ready(handler("4. ready #7"));
    $(window).load(handler("7. load #8"));
  }();
</script>

The result is

1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6

Look at lines 7 and 8. The load handled attached from ready event is the last one. So by using this way we can ensure that all previously added (during scripts parsing and exection) load handlers have already been called.

so using $(window).load outside the $(document).ready and inside doesn't change that much from how it'd affect how stuff work?

Actually it can affect script execution. The first version works and the second doesn't:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function () {
    $(window).load(function () {
      $.magic.value = 12;
    });
  });
</script>

<script>
  $(window).load(function () {
    $.magic = {};
  });
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

  $(window).load(function () {
    $.magic.value = 12;
  });
</script>

<script>
  $(window).load(function () {
    $.magic = {};
  });
</script>
like image 52
Qwertiy Avatar answered Sep 21 '22 09:09

Qwertiy