Introduction:
Using this JQuery tutorial, we will learn what is the difference between window.load and document.ready event in the JQuery.Description:
JQuery code fires DOM is ready to be traversed and manipulated. But for some of the situations, we need to wait for complete window and resources must be load. In that situations we have to use the load() event with JQuery.Please go through below JQuery Example. If you run below code u will get homepage as silver code after clicking on alert you will get background color as green.
Main code:
$(document).ready(function () {
$(document.body).css('background-color', 'silver');
});
$(window).load(function () {
alert('this will alert after all the window resources completly loaded');
$(document.body).css("background-color", "green");
});
Complete Code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document.body).css('background-color', 'silver');
});
$(window).load(function () {
alert('this will alert after all the window resources completly loaded');
$(document.body).css("background-color", "green");
});
</script>
</head>
<body>
</body>
</html>
Output:
Before window load: |
Before window load:
|
After window load:
 |
| After window load in JQuery |
Post a Comment