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
?
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.
We can have multiple document. ready() function in our code but only one body.
Yes we can do it as like I did in below example both the $(document). ready will get called, first come first served.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With