In this blog post, we will learn how to use the window load event in jQuery. The window load event is triggered when the entire web page, including all images, CSS, and other resources, have completed loading. This is different from the document ready event, which is triggered when the DOM is ready, but not necessarily when all resources have been loaded.
To use the window load event in jQuery, you can use the $(window).on(‘load’, function() {}) method, like this:
$(window).on('load', function() {
// Your code here
});
When the window load event is triggered, the code inside the function will be executed. This is useful for actions that depend on the complete loading of all resources, such as images or iframes.
For example, let’s say you want to display a hidden element only after all the images on the page have been loaded. You can achieve this by using the window load event like this:
$(window).on('load', function() {
$('#hidden-element').fadeIn();
});
It’s important to note that if you use the document ready event instead of the window load event in this scenario, the hidden element may be displayed before all the images have been loaded, causing an undesired effect.
Keep in mind that the window load event should only be used when you need to wait for all resources to load, as it may cause a delay in executing your code. If you only need to wait for the DOM to be ready, you should use the document ready event instead, like this:
$(document).ready(function() {
// Your code here
});
In conclusion, the window load event in jQuery is a powerful tool that allows you to execute your code only after all resources have been loaded. Remember to use it wisely, and consider using the document ready event if you don’t need to wait for the complete loading of all resources.