I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my $(document).ready() and putting it within $(window).load() fixed the problem.
Now I understand that window.load is fired just after document.ready, but why is it not ready after document.ready, that is after window.load()?
On
$(document).ready() means that the DOM of your page is ready to be manipulated.
window.load() is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.
What are you trying to achieve?
On
$(document).ready(function(){
//code here
});
The code above is used almost every time when we work with jQuery.
This code is used when we want to initialize our jQuery codes after the DOM is ready.
$(window).load()
Sometimes you want to manipulate pictures. For example you want to vertically and horizontally align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading. That’s where we use $(window).load()
On
$(document).ready is slider fast in comparison $(window).load Event.
$(document).ready is fire when Dom is load but $(window).load Event fire when Dom ,css and images fully loaded.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function () {
var img = $('#img1');
alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>$(document).ready is a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's html DOM. This event is fired before all the images, css etc. are fully loaded.
window.load() is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.
On
$(document).ready() is wrap DOM in <body>...</body>
$(window).load() is papa of document wrap all DOM in <html>...</html>
Let's use in your case to save render processing.
On
In simple words, window.load is called when all content of window is loaded whereas document.ready is called when DOM is loaded and document structure is ready.
On
$(document).ready is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.
$(window).load event is fired after whole content (including css, images etc..) is loaded.
This is major difference.
On
Load state is the state when the window object has been created and all necessary components including DOM has been loaded in memory, but has not been passed to the rendering engine for rendering the same in page.
Ready state on the other hand makes it sure that the DOM elements, events and other dependent components are passed on to the rendering engine, rendered on page, and is ready for interaction and manipulation.
loadis called when all assets are done loading, including images.readyis fired when the DOM is ready for interaction.From the MDC, window.onload:
From the jQuery API documentation, .ready( handler ):