Quick Reach
jQuery load() method
The load() method, which is deprecated in 1.8 version of jQuery library, is used to perform actions as load event occurs. The load event happens when a specified element like images, iframes, frames scripts or window is completely loaded.
The load() method becomes challenging, especially in case of images loading as it comes to compatibility of browsers, when execution of functions are also attached to load() method. For example if images are already in cache it may cease to execute.
Syntax of load() method
$(selector).load(function)
e.g.
$(“image”).load(function)
$(“window”).load(function)
Running example of load() method with an image
In example below the load event of image will trigger an alert showing image is loaded.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#tc_logo").load(function(){
alert("TC logo loaded!");
});
});
</script>
</head>
<body>
<img id="tc_logo" src="https://www.tutorialscollection.com/wp-content/themes/MagazinePro/images/logo.png">
</body>
</html>
|
Example of using jQuery window load()
This example will display an alert when whole document is loaded, including all images and other content.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$(window).load(function(){
alert("whole document loaded!");
});
});
</script>
</head>
<body>
<img id="tc_logo" src="https://www.tutorialscollection.com/wp-content/themes/MagazinePro/images/logo.png">
</body>
</html>
|
There is another method with same name load() which is associated with loading data from server and placing the returned HTML into matched elements. This comes under AJAX method.
Leave A Comment?