when jquery, javascript functions are called?

Question

When HTML page is open, I can call javascript function with many ways.(automatically)
onpageshow, onload, $(function() {...} );, only simple line function, etc..

I want to know what are different and sequence of them.
(Recently, I understand onload don't called if the page is caching, so i change it onpageshow).

[Number] in under code is the sequence that I expected.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onpageshow="onPageShow();" onload="onLoad()">

<script type="text/javascript">
  console.log("[1] - simple function");

  function onPageShow() {
    console.log("[2] - onPageShow()");
  }

  function onLoad() {
    console.log("[3] - onLoad()");
  }

  $(function() {
    console.log(`[4] - $(function(){})`);
    // same with document.onload, maybe
  });
</script>
</body>

You might also be interested in DOMContentLoaded and readystatechange. See youmightnotneedjquery.com/#ready — Theraot
– Theraot, Commented Mar 29, 2021 at 5:36

Skully · Accepted Answer · 2021-03-29 05:42:28Z

2

OnLoad()

The onload event occurs 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.).

Example (in HTML)

<element onload="myScript">

Example (in JavaScript)

object.onload = function(){myScript};

OnPageShow()

The onpageshow event occurs when a user navigates to a webpage. The onpageshow event is similar to the onload event, except that it occurs after the onload event when the page first loads. Also, the onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache.

Example:

<body onpageshow="myFunction()">

edited Mar 29, 2021 at 5:42

Skully

3,1743 gold badges29 silver badges43 bronze badges

answered Mar 29, 2021 at 5:33

Mr_GamePLAY

588 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zem Over a year ago

For make short html code, I use onpageshow not onload. because onload sometimes don't drawing my data-elements. like this situation, Is there any advantages onload is better than onpageshow?

Talha Ramzan · Accepted Answer · 2021-03-29 06:35:20Z

Onload Event

The DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the element, The <body>

The onload event can be used to check the browser type and browser version, and load the version of the web page based on the information. The onload event can also be used for cookies.

Example:

<!DOCTYPE html>
<html>

<head>
 <title>
   HTML DOM onload Event
</title>
</head>

<body>
 <center>
     <img src="https://contribute.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png" 
         id="imgid">
    <p id="pid"></p>

    <script>
        document.getElementById(
          "imgid").addEventListener("load", GFGFun);

        function GFGFun() {
            document.getElementById("pid").innerHTML = 
              "Image loaded";
        }
    </script>
</center>
</body>

</html>

OnPageShow Event

The DOM onpageshow event in HTML occurs on navigating a webpage by the user.

the onload event does not occur when the page is loaded from the cache and onpageshow event occurs every time the page is loaded otherwise both the events are similar.

Example:

<!DOCTYPE html>
<html>

<head>
 <title>
     HTML DOM onpageshow Event
 </title>
</head>

<body>
 <center>
     <h1 id="hID" 
         style="color:green">
     </h1>
    
     <h2>HTML DOM onpageshow Event</h2>
 </center>

<script>
    document.getElementsByTagName(
      "BODY")[0].onpageshow = function() {
        GFGfun()
    };

    function GFGfun() {
        document.getElementById("hID").innerHTML =
          "GeeksforGeeks";
    };
 </script>

</body>

</html>

Collectives™ on Stack Overflow

when jquery, javascript functions are called?

2 Answers 2

OnLoad()

OnPageShow()

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

OnLoad()

OnPageShow()

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related