How to execute jQuery code only after WebPage is loaded completely

One of the advantage of jQuery document.ready() is that it doesn't wait for complete page loading, it starts executing as soon as DOM is loaded. "DOM loading" and "Page Loading" are 2 different terms and don't get confused between these. There is a fundamental difference between these two terms.

"DOM loading" means all the DOM elements are completely loaded but it is quite possible that some of the elements like images are not loaded completely. $(document).ready() gets called when DOM is loaded.

And "Page loading" means that along with all the DOM elements, other elements like images are also loaded completely. window.onload() is traditional Java script code which gets called when the page is loaded.

Read "Is window.onload is different from document.ready()"

But sometimes you may encounter a situation where you need to run the jQuery code once your page is loaded completely. So how do you achieve that? Well, the solutions is combination of jQuery and JavaScript. The solution is to bind the window.onload event in document.ready().

//Code Starts
$(window).bind("load", function() {
   // code here
});
//Code Ends

Feel free to contact me for any help related to jQuery, I will gladly help you.



Responsive Menu
Add more content here...