.load()

Syntax and Description

.load(handler)

handler is a function to execute when the event is triggered. Return value is the jQuery object, for chaining purposes.

.load(handler) binds an event handler to the load JavaScript event.

This method is a shortcut for .bind('load', handler).

The load event is sent to an element when it and all its sub-elements have been completely loaded.

For example, consider a page with a simple image as follows:

  
<img src="book.png" alt="Book" id="myImage" />

The event handler can be bound to the image.


$('#myImage').load(function() {
   $.print('loaded.');
});

As soon as the image has been loaded, the loaded will be printed.

Loaded event

The following code adds load event to input tag. And if the element is higher than 100 pixel it will print big or it will print small.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w w  w. j av  a 2s . com-->
            $('input').load(function(){
              if($(this).height() > 100) {
                $(this).addClass('big');
              }else{
                $(this).addClass('small');
              }
            });
        });
    </script>
  </head>
  <body>
    <body>
     <input type="text" />
    </body>
</html>

Click to view the demo

The code above generates the following result.