Skip to content Skip to sidebar Skip to footer

JQuery check page is fully loaded or not | $(document).ready() vs $(window).load()

Reading Time: < 1 minute

How to check web page is fully load or not using JQuery.First you must understand JQuery document.ready and window.load functions.Here this is simply describes also differences between document.ready and window.load functions and usages.

$(window).load(function() {
    // page is fully loaded.
})

Differences between $(window).load() and $(document).ready()

$(document).ready()

$(document).ready(function(){
	// executes when HTML-Document is loaded and DOM is ready/
        // document is ready
});
  • $(document).ready() is used when we want to initialize our jQuery codes after the DOM is ready.
  • You can get your events to load or fire or whatever you want them to do before the window loads.
$(document).ready(function() {
});
// above function is same to below function
$(function(){
)};

$(window).load()

$(window).load(function() {
    // page/window is fully loaded.
});
  • $(document).ready() and $(window).load() both occur roughly at the same time.
  • In chrome, functions called by $(document).ready() tend not to work consistently.One way to fix this issue is to write your function , and then call it window.onload = yourFunctionName();
  • I suspect this becomes necessary due to the multi-threaded processes chrome uses to be so dang fast.
  • $(window).load() can be use to check page / images is loaded or not in the page.

Also following core java script function is same to document.ready() function.

document.addEventListener('DOMContentReady', function()
{
     // DOM is loaded
});