All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Event After Page Fully Loaded

Last Updated : Mar 11, 2024

jQuery Event After Page Fully Loaded

In this article we will show you the solution of jQuery event after page fully loaded, to achieves the result you need window object with ‘load’ event that confirms page load process.

The focus() event defined to show some process after successful page load.

You can try any other event as well if you not interest implement this event. But result and process will same so don’t worry about other things.

Step By Step Guide On jQuery Event After Page Fully Loaded :-

In html block we defined h1 tag, and input element. In script block window object specified to ensure load process of current window. Then which is appends with on() method with ‘load’ event.

Both of them helps to figure outs current window’s loading task.

Where defined focus event will clarifies user as done loading page and that’s why text box pointing for input. Instead of focus event you can explore different events on webpage.

<!DOCTYPE html>
<html>
    <head>
        <title>Event Trigger After Page Load</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(window).on("load",function(){
                $("input").focus();
                $("input").css("border","10px inset rgb(244, 10, 84)");
            });
        </script>
        <body>
            <h1>After Page Load Focus Event Will Points Input Box</h1>
            <input type="text">
        </body>
    </head>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. To finds out page load first you want window object permission. That can allows you to retrieve event results then we checks load event for verify current page load process.
  8. If its done we triggers focus event to point the text box and changing border with 10px thickness, inset border style and reddish color.
  9. Within load function you can implement some other significant events that needs to clarify user as finished load process successfully.
  10. In body block h1 tag for showing heading to end user ‘After Page Load Focus Event Will Points Input Box’ and input element. To access input element we used its tag name and disclose vary notifications.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to check page load in jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.

When we execute this program on browser we can see heading, below that empty input box with focused state because of successful page load.

I hope this article on jQuery event after page fully loaded helps you and the steps and method mentioned above are easy to follow and implement.