Run JavaScript only after page is completely loaded

Before we got into the actual problem it is important to know and understand the fundamental difference between DOM loading and Page Loading. When we say DOM loading that means all the DOM elements are completely loaded but it is quite possible that some of the elements like images are not loaded completely. When we say "Page loading" which means that along with all the DOM elements, other elements like images are also loaded completely.

jQuery document.ready() gets called immediately after DOM elements are loaded but window.onload() which is Javascript event gets called when page is completely loaded. Read "Is window.onload is different from document.ready()"

So sometimes you may encounter a situation where you need to run the Javascript 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().

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

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



Responsive Menu
Add more content here...