It fires when our HTML document is completely loaded, including images, CSS, objects, scripts, frames, and other important resources.
Three important steps:
1st step - DOM is ready.
2nd step - The web page (images, stylesheets etc.) is fully loaded.
3rd step - The event fires.
Is it deprecated ?
Yes, it is deprecated in jQuery version 1.8, and completely removed in 3.0.
This is the old code -
$(window).load(function () {
alert("Window Loads");
});
Is there any new code available, if we want to use newer versions (for example, 3.1.0) of jQuery?
Yes, this is the new code -
$(window).on('load', function () {
alert("Window Loaded");
});
Is there any new code available, if we want to use newer versions (for example, 3.1.0) of jQuery?
Yes, this is the new code -
$(window).on('load', function () {
alert("Window Loaded");
});
Can you give us an example?
Yes. For example, this is our code -
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(window).on('load', function () {
alert("techntoast image loaded");
});
</script>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq6WE5wcvPEt5H6g-9H-flChYCxztGeSSqzQXT_MzT3GDRlWYSy9OowSR96dtzJUG9wA94y02hCwIqJoqgITQmKIY1VrOid8MPf3i0yaVrfq8VmypXxYbUCd11q7YVMXZDNNoOBZjq6xw/s320/techntoast.gif">
</body>
</html>
Let's test this code in a JavaScript Editor - https://www.techntoast.com/2019/11/test-your-html-javascript-and-css-codes.html
When we open an HTML document in a browser, it creates a DOM structure. Document Object Model is an API (Application Programming Interface) to the web page. We can use various commands and methods to manipulate the DOM. For example, manipulate Elements, Classes, Structure, Attributes etc.
It stands for
D - Document - An HTML Page.
O - Object - All attributes (href, alt etc.) and elements (<a>, <head>, <body>, <h1>, <h2>...).
M - Model - A tree structure, which looks like the following graphic:
