minte9
LearnRemember   JAVASCRIPT





Life cycle

The lifecycle of an HTML page has three events: DOMContentLoaded / Window Load / Window Unload – the user is leaving the page

1) DOMContentLoaded

The browser fully loaded HTML, and the DOM tree is built. The DOMContentLoaded event happens on the document object. When the browser processes an HTML-document and comes across a script tag, it needs to execute before continuing building the DOM.

Javascript 

 
document.addEventListener("DOMContentLoaded", ready);

function ready()
{
    console.log('DOM is ready!');
}

jQuery 

 
$(document).ready(function() 
{
    alert('DOM is ready!');
});

Javascript 

 
document.addEventListener("DOMContentLoaded", function(){
    console.log('DOM is ready!');
});

console.log('DOM not ready yet!');

// DOM not ready yet!
// DOM is ready

2) Window load

All the external resources are loaded (images, styles). The load event on the window object triggers when the whole page is loaded. 
 
window.onload = function()
{
    console.log('Page loaded!');
}

console.log('Page not loaded yet!');

//Page not loaded yet!
//Page loaded




References: