How to load jQuery code after loading the page?
Method 1: Using the on() method with the load event: The on() method in jQuery is used to attach an event handler for any event to the selected elements. The window object is first selected using a selector and the on() method is used on this element.
The ‘load’ event fires whenever the whole page has finished loading including other resources like the stylesheets and images. This event is checked for bypassing it to the on() method. The function to be executed can be then invoked in the second parameter of this method. This will now invoke the function after the page has completed loading.
$(window).on('load', functionTobeLoaded() )
Output: After the page loaded:
Method 2: Using the ready() method: The ready() method in jQuery is used to execute code whenever the DOM becomes safe to be manipulated. It accepts a handler that can be passed with the function required to be executed. It will now invoke the function after the page has completed loading.
$(document).ready( functionTobeLoaded() )
Output: After the page loaded