Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery load Event

Posted in jQuery Tutorial
Updated on Nov 21, 2024
By Mari Selvan
👁️ 47 - Views
⏳ 4 mins
💬 1 Comment
jQuery load Event

Photo Credit to CodeToFun

🙋 Introduction

In jQuery, the load event was traditionally used to execute JavaScript code when a specific element or the entire document finishes loading. However, as of jQuery version 3.0, the .load() method has been deprecated in favor of the more versatile .on() method. Understanding how to use the .on() method with the load event is essential for modern web development.

In this guide, we'll explore the usage of the jQuery load event with the .on() method, providing clear examples to help you grasp its functionality effectively.

🧠 Understanding load Event

The .on() method in jQuery is a powerful event handling function that allows you to attach one or more event handlers to selected elements. It provides a flexible way to bind event handlers to elements, including handling the load event.

💡 Syntax

The syntax for the load event is straightforward:

syntax.js
Copied
Copy To Clipboard
.on( "load", [, eventData ], handler )

📝 Example

  1. Handling Document Load Event:

    You can use the .on() method to execute code when the entire document has finished loading. Here's how you can do it:

    example.js
    Copied
    Copy To Clipboard
    $(document).on("load", function() {
      console.log("Document is fully loaded");
    });

    This code will log Document is fully loaded to the console when the document is loaded.

  2. Binding Load Event to Specific Element:

    If you want to execute code when a specific element has finished loading, you can target that element using its selector. For example:

    example.js
    Copied
    Copy To Clipboard
    $("#image").on("load", function() {
      console.log("Image is loaded");
    });

    This code will log "Image is loaded" to the console when the element with ID image finishes loading, such as an <img> element.

  3. Using Event Data:

    You can also pass additional data to the event handler using the eventData parameter. This data will be available within the handler function. Here's an example:

    example.js
    Copied
    Copy To Clipboard
    $(window).on("load", { message: "Window is loaded" }, function(event) {
      console.log(event.data.message);
    });

    This code will log Window is loaded to the console when the window finishes loading.

  4. Ensuring Event Binding After DOM Manipulation:

    Since the .on() method allows event delegation, it's useful for dynamically added elements or elements that might not exist when the page initially loads. Ensure that you bind the event after any DOM manipulation to ensure proper functionality.

🎉 Conclusion

The jQuery load event, when used with the .on() method, provides a robust mechanism for executing code when elements or the entire document finishes loading. Whether you need to handle the document load event, bind load events to specific elements, or pass additional data to event handlers, the .on() method offers a flexible and efficient solution.

By mastering its usage, you can create more responsive and interactive web applications.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy