JQuery Load and Unload Methods Example

JQuery Load()

The JQuery load event occurs when document is loaded. It binds event handler to load an event. The load event is sent to element when all elements have been completely loaded. The load event happens when specified element like images, script or window is completely loaded. If images are already in the cache, the load event may not trigger. It may depend on browser also. The load event is deprecated in 1.8 version of jquery library.

JQuery Load() Syntax

$(selector).load(function)

It has parameter called function which specifies the function to be run when load event occurs.

JQuery Load() Example

<!doctype html>
<head>
<title>JQuery Load Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Load Event Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myimage").load(function(){
        alert("image is loaded!!!");
      });
   });
</script>
<body>
   <image src="C:\Sunset.jpg" id="myimage" width="250" height="250">
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(“#myimage”).load(function()) line defines load event which occurs when document is loaded. It binds event handler to load an event.
The load event uses id #myimage, which is mentioned in the image tag. After executing the above example, you will get image on the browser and alert box will display with message saying image is loaded!!!.

When you run the above example, you would get the following output :

Run This Demo

JQuery Unload()

The unload event occurs when document is unloaded. It binds event handler to unload an event. The unload event is sent to the window element when the user navigates away from the page. The unload event occurs when user could have clicked on a link to leave the page, when page is reloaded or when closing the browser window. The unload event should only be used on the window object. The unload event is deprecated in 1.8 version of jquery library.

JQuery Unload() Syntax

$(selector).unload(function)

It has parameter called function which specifies the function to be run when unload event occurs.

JQuery Unload() Example

<!doctype html>
<head>
<title>JQuery Unload Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Unload Event Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $(window).unload(function(){
        alert("Unload event occurs when you close the browser window!!!");
      });
   });
</script>
<body>
<p>Click this link <a href=http://www.google.com>Google</a> or close the browser window to occur unload event. </p>
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(window).unload(function()) line defines unload event which occurs when document is unloaded.
After executing the above example, you will get image link. The unload event triggers when you could have clicked on a link to leave the page or when you closes the browser window.