document.ready event :
document.ready event will fire whenever DOm is loaded
window.load event :
window.load event will fire after loading all assets(images,Iframes etc) of webpage.
ex1:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
//first DOM will load
$('document').ready(function() {
alert('DOM loaded');
});
//in this program, after image will load this event will fire.
$(window).load(function() {
alert("window loaded");
});
</script>
</head>
<body>
<img src="http://www.all-wallpapers.net/wallpapers/2012/11/Dimensional-Images-1050x1680.jpg" />
</body>
ex2:
$(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");
});
document.ready event will fire whenever DOm is loaded
window.load event :
window.load event will fire after loading all assets(images,Iframes etc) of webpage.
ex1:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
//first DOM will load
$('document').ready(function() {
alert('DOM loaded');
});
//in this program, after image will load this event will fire.
$(window).load(function() {
alert("window loaded");
});
</script>
</head>
<body>
<img src="http://www.all-wallpapers.net/wallpapers/2012/11/Dimensional-Images-1050x1680.jpg" />
</body>
ex2:
$(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");
});
