CODEWITHSUNDEEP
javascriptjquery
Joshua Bakker
Joshua Bakker

Reputation: 2358

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

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?

Upvotes: 5

Views: 3033

Answers (2)

Qwertiy
Qwertiy

Reputation: 21400

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>

Upvotes: 4

fmue
fmue

Reputation: 89

$(document).ready kicks in when all nodes of the DOM have been loaded but not necessarily their content, that's what's $(window).load is for, e.g. an img-ele can be present, yet it's content – the image – hasn't been loaded.

So, you're right, use each listener only once and don't nest them.

Upvotes: 0

Related Questions