Difference Between jQuery Document.Ready() & Window.Load() Events
Document.Ready() event gets fired when DOM is completely loaded, but not its other contents like images, css, iframes etc.
Window.Load() event gets fired when DOM is completely loaded as well as its other contents like images, css, iframes etc.
Document.Ready() event gets fired before Window.Load() event. This means if you want to do any kind of manipulation with HTML elements like adding click event to a button, you can make use of Document.Ready() event. If you want to grab some details like image height and width which will take time to load depending upon where it is actually located, you can make use of Window.Load() event.
A sample code is given below, which will display a message box when Document.Ready() and Window.Load() events will be fired.
Before looking over sample code, you must know that $ signs represents jQuery keyword. You can use either $ or jQuery keyword, both are good to go but by convention, we use $ sign because it will save a lot of time while writing a code and its easy to remember.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(window).load(function (){
alert("Window Load Event Fired!");
});
$(document).ready(function (){
alert("Document Ready Event Fired!");
});
</script>
</head>
<body>
</body>
</html>
