JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

JQuery Load and Unload Methods Example

May 2, 2014 by Krishna Srinivasan Leave a Comment

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

[code lang=”xml”]
$(selector).load(function)
[/code]

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

JQuery Load() Example

[code lang=”xml”]
<!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>
[/code]

  • 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 Load Event Example

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

[code lang=”xml”]
$(selector).unload(function)
[/code]

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

JQuery Unload() Example

[code lang=”xml”]
<!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>
[/code]

  • 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.

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

  • Run This Demo

JQuery Unload Event Example

 

Filed Under: jQuery Tagged With: JQuery AJAX, JQuery Deprecated API

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved