Call JavaScript function on page load.

How do I call a JavaScript function on page load?

This tutorial will teach us to call a JavaScript function on page load. In many cases, while programming with HTML and JavaScript, programmers need to call a function, while loading the web page or after the web page load finishes. For example, programmers need to show the welcome message to the user on page load, and the programmer needs to call a JavaScript function after the page load event.

There are various ways to call a function on page load or after page load in JavaScript, and we will look at them one by one in this tutorial.

• Using the onload event in the tag
• Using the window.onload Event
• Using the DOMContentloaded Event

Using the onload event in the tag

The first approach for calling a function on the page load is the use an onload event inside the HTML tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.

Syntax

Follow the below syntax to use onload event in the tag.

Example

In the below example, we have created the JavaScript function named welcomeFunction(). We are calling that function from the tag using the onload event, and it shows the welcome message in the alert box to the users.

      
Methods to call a JavaScript function on page load.
 
Call the JavaScript function on page load by using onload event in the HTML body tag.
 let message = document.getElementById("message"); function welcomeFunction() 

When users run the example code, they will give the welcome message in the alert box. When function execution completes, users will get the above output message.

Using the window.onload Event in JavaScript

Here, we have a second approach for calling the function on page load in JavaScript. Every web page contains the window object by default, and the window object represents the global variables. We can access any global variable or function in JavaScript using the window object. In this approach, we will use the onload property of the window object.

By using the window.onload property, users can either call a named function or bind an anonymous function to the window.onload and all code inside the anonymous function will be executed after the page load.

Syntax

Users can follow the below syntax to use the window.onload to call a function on page load.

Function simpleFunction ( ) < // function body >Window.onload = simpleFunction( );

Example

In the below example, we are calling the named function on the page load using the window.onload property.

      
Methods to call a JavaScript function on page load.
 
Call the JavaScript function on page load by using window.onload event in the JavaScript.
  window.onload = simpleFunction( 10, 20 ); // call function with parameters on page load function simpleFunction( num1, num2 ) 

Using the DOMContentLoaded Event

JavaScript has a cool feature of the event listener, and users can call a function or perform some operation when any event triggers. In this approach, we will use the “DOMContentloaded” event. We will call the desired function using the addEventListener() method in JavaScript. Also, we will apply the event listener to the whole document such that we can call a function on the page load.

Syntax

To call the DOMContentLoaded event, users can follow the below syntax.

document.addEventListener("DOMContentLoaded", function() < // function body >);

Example

The below example demonstrates the use of the DOMContentLoded event to trigger a function call on the page load.

      
Methods to call a JavaScript function on page load.
 
Call the JavaScript function on page load by using document.addEventListener( ) method.
 let message = document.getElementById("message"); document.addEventListener( "DOMContentLoaded", functionCall()); function functionCall() 

Users will also see the alert box with the message when the function will be executed.

Conclusion

Here, we have defined three approaches to trigger a function call on the page load. The first approach we can use inside the HTML code, the second one in the JavaScript code, and the third approach is the best approach to achieve our goal.

Furthermore, users can change the event in the third approach to trigger a function on a particular event. One more thing in the last approach is rather than triggering the event listener to the whole document, users can apply it to a specific HTML element also.

Источник

HTML onload Attribute

The onload attribute fires when an object has been loaded.

onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see «Supported HTML tags» below).

For input elements, the onload attribute is only supported when

The onload attribute can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

Applies to

The onload attribute is part of the Event Attributes, and can be used on the following elements:

Examples

Body Example

Execute a JavaScript immediately after a page has been loaded:

Img Example

Using onload on an element. Alert «Image is loaded» immediately after an image has been loaded:

Input Example

Using onload on an element. Alert «Image is loaded» immediately after an image has been loaded:

Browser Support

The onload attribute has the following browser support for each element:

Element
body	Yes	Yes	Yes	Yes	Yes
iframe	Yes	Yes	Yes	Yes	Yes
img	Yes	Yes	Yes	Yes	Yes
input type=»image»	Yes	Yes	Yes	Yes	Yes
link	Yes	Yes	Yes	Yes	Yes
script	Yes	Yes	Yes	Yes	Yes
style	Yes	Yes	Yes	Yes	Yes

Источник

4 Ways To Run Javascript After Page Load (Simple Examples)

Welcome to a quick tutorial on how to run Javascript after page load. Having some trouble with missing elements, variables, or functions? Want to delay a piece of Javascript until everything else is fully loaded?

The common ways to run Javascript after page load are:

1. Add an event listener – document.addEventListener(«load», FUNCTION);
2. Add onload to the body tag –
3. Defer the script –
4. Lastly, place the script at the very bottom of the page – Although this is not quite “after page load”.

That covers the basics, but let us walk through some detailed examples in this guide. Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

EXECUTE ON PAGE LOAD

All right, let us now get into the ways and examples of how to run Javascript on page load.

1) EVENT LISTENER

Events should be pretty self-explanatory, even if you have never heard of them before. They are fired whenever something of interest happens – Mouse click, scroll, keypress, video play, and more. In this example, we listen to the load event on the window itself; Run a piece of Javascript when the window is fully loaded.

P.S. You can also target the DOMContentLoaded event. The difference is that load is fired when everything is fully loaded. But DomContentLoaded is triggered as soon as all the HTML elements are ready. I.E. Images, CSS, videos may not be fully loaded.

2) BODY ON LOAD

    // (A) JAVASCRIPT FUNCTION function demo ()    
 

Well, this kind of does the same thing as attaching addEventListener(«load», FUNCTION) . When the HTML document is loaded, onload=»demo()» will be triggered.

3) DEFER SCRIPT LOAD

document.getElementById("myTxt").style.color = "blue";

Yes, just add defer to the tag, and it will hold until the entire page is done. For those who are confused about the difference between defer and onload :

• defer will basically load the Javascript only when the HTML page is done.
• onload does not mess with the loading order of the script, it simply runs the specified function when the page is ready.

P.S. Please take note that defer will not work with inline Javascript. I.E. Must load an external Javascript file.

4) SCRIPT AT BOTTOM (NOT QUITE AFTER PAGE LOAD)

Lastly, just put the scripts at the bottom of the page. This is not quite “after page load”, but it is… After everything else is nearly loaded.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

Personally, I will usually use window.addEventListener(«DOMContentLoaded», FUNCTION) or defer loading non-critical scripts. But whichever makes the most sense for your own project is the best method.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник