How to Call javaScript Function After Whole Page Load Complete?

22-May-2023

.

Admin

How to Call javaScript Function After Whole Page Load Complete?

Today our leading topic is execute function after complete page load. This article goes in detailed on how to execute a function when page has fully loaded. Here you will learn call javascript function after whole page load complete. this example will help you javascript - call function after complete page load.

There are several ways to call a JavaScript function after the whole page has loaded. Here are some of them:

Example 1: Using window.onload event


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How to Call javaScript Function After Whole Page Load Complete? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

window.onload = function() {

// your code here

};

</script>

</html>

Example 2: Using jQuery

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How to Call javaScript Function After Whole Page Load Complete? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

$(document).ready(function() {

// your code here

});

</script>

</html>

Example 3: Using defer attribute in script tag

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How to Call javaScript Function After Whole Page Load Complete? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

<script src="your-script.js" defer></script>

</script>

</html>

Example 4: Using async attribute in script tag

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>How to Call javaScript Function After Whole Page Load Complete? - NiceSnippets.Com</title>

</head>

<body>

</body>

<script type="text/javascript">

<script src="your-script.js" async></script>

</script>

</html>

Note: The defer and async attributes may not work in all browsers, so it's recommended to use the first two methods for better compatibility.

#JavaScript