Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery load() Method
jQuery | load() Method: Learn about the jQuery load() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 20, 2022
load() Method
Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the load() method here.
The load() method is used when some data from the outside has to be loaded onto the web page (document). Generally – images, videos, iframes, window objects, etc. are loaded using this method. The load event is also dependent on the user's browser. It may or may not get triggered depending on the cache of the browser.
load() Method Syntax
$(selector).load(function);
It takes a function as its parameter. The function is fired when the load event is triggered on the window.
Note: The load event has been deprecated and then further removed from version 3.0. Therefore, now we use .on() and .trigger() method to load the URL on the page.
jQuery load() Method Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery Event - Load</h2>
<p>An alert shows when the iframe below is loaded on the page.</p>
<hr>
<iframe src="https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772240_960_720.png" height="200px"></iframe>
<hr>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("iframe").on('load',function(){
alert("Image loaded.");
});
});
</script>
</html>
Output:
