What are jQuery events .load(), .ready(), .unload()?

jQueryWeb DevelopmentFront End Technology

jQuery load() method

The load() method is used to attach event handler to load event.

Example

You can try to run the following code to learn how to work with jQuery load() method.

Note:  The method deprecated in jQuery 1.8. It got finally removed in jQuery 3.0. To run the following code, add jQuery version lesser than 1.8,

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("img").load(function(){
        alert("This is an image.");
    });
});
</script>
</head>
<body>

<img src="/videotutorials/images/coding_ground_home.jpg" alt="Coding Ground" width="310" height="270">

<p>This image will load only in jQuery version lesser than 1.8</p>

</body>
</html>

jQuery ready() method

Easily specify what happens when a ready event occurs, with the ready() function.

Example

You can try to run the following code to learn how to work with ready() method. For an example, we're hiding an element here:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<p>This is demo text.</p>

<button>Hide</button>

</body>
</html>

jQuery unload() method

If you want to trigger an event while navigate away from the page, use the unload() method.

Note: The jQuery unload() method deprecated in jQuery 1.8. It got finally removed in jQuery 3.0.

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(window).unload(function(){
        alert("Thanks! Bye!");
    });
});
</script>
</head>
<body>

<p>Event triggers when you leave the page.</p>
</body>
</html>
raja
Published on 20-Dec-2017 07:32:40
Advertisements