In this article we will explain how to use Load() method in jquery or  how to attach Load event to a html element such as (image, script, frame, iframe) or how to execute a function when image completely loaded.


jQuery load () method is used to load a specific element. It attaches an event handler to load event. The load event occurs when a specific element is loaded. It is generally used with a URL (image, script, frame, iframe), and the window object.

Note: On some browsers, the load event did not trigger if the image is cached.



jQuery Load() example

In this example code when the image will be loaded completely then user will be alerted with "Image loaded". In case any problem occurs while loading the image then no alert will be shown to the user. If we want to get notification if image couldn't get loaded, we can use .error() method.


 <!DOCTYPE html>
<html xmlns="">
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
            $(document).ready(function () {
                $("img").load(function () {
                    alert("Image loaded.");
    <img src="download.jpg" />
    <p><b>Note:</b> On some browsers, the load event did not trigger if the image is cached.</p>          




How to bind load event to a html element in jQuery

I hope it will help to you after reading it.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like