Menu
I am using jquery and requirejs with my projects. Recently, I've found something that I never expected. What it is If I load jquery via requirejs. The DOM ready event always fire after window.onload event .
Here is my example: http://jsbin.com/ozusIBE/2
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<img src="http://thejetlife.com/wp-content/uploads/2013/06/Times_Square_New_York_City_HDR.jpg" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
<script>
window.onload = function () {
console.log('window.onload');
};
$(function () {
console.log('document.ready1');
});
requirejs.config({
paths: {
jquery: ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min']
}
});
require(['jquery'], function () {
console.log('required moudels have been loaded');
$(function () {
console.log('document.ready2');
});
});
</script>
</body>
</html>
When I load the page without cache. The result in console is:
document.ready1
required moudels have been loaded
window.onload
document.ready2
Notice that ready2 always runs after window.onload. If I change the code a little bit then it makes difference.
//do not use requirejs to load jquery
//require(['jquery'], function () {
require([], function () {
console.log('required moudels have been loaded');
$(function () {
console.log('document.ready2');
});
});
The result is:
document.ready1
required moudels have been loaded
document.ready2
window.onload
It seems that if I use requrejs to load jquery as an AMD module asynchronously. The DOM ready event is useless. Because DOM ready event will fires after window.onload.
I have no idea why this happened and is there any way I can fix this issue?
UPDATE:
Thank to dherman.
As dherman mentioned about document.readyState. I've made small investigation and found a solution for the issue. I've tested it on Chrome and Firefox. It works well. However, It maybe not a perfect solution as all versions of IE can have interactive state before the DOM is fully loaded. (ref)
Here is my updated example: http://jsbin.com/ozusIBE/16
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/a/ab/NYC_-_Time_Square_-_From_upperstairs.jpg" />
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<script>
requirejs.config({
paths: {
jquery: ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min']
}
});
require(['jquery'], function () {
console.log('required moudels have been loaded');
var init = function(){
console.log('document.ready');
};
if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ){
init();
}else{
$(function(){ init(); });
}
});
window.onload = function () {
console.log('window.onload');
};
</script>
</body>
</html>
690
document. onload event is fired before the window. onload.
The major difference between the JavaScript's onload and jQuery's ＄(document). ready(function) method is that: The onload executes a block of code after the page is completely loaded while ＄(document). ready(function) executes a block of code once the DOM is 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.
The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
The native DOMContentLoaded event is firing exactly when it should be - when the document is ready. Since you're loading jQuery via RequireJS, you are potentially missing that event. When that occurs, jQuery does not know that the document is ready and must wait for the load event to be fired, or that document.readyState === "complete" in the case that load has already fired as well.
139
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
