javascript - call function after complete page load - Stack Overflow

admin2025-04-19 0

I'm using a javascript in my html page.. I have been recording the time taken using the navigation API .. When I try to findout the total load time (navigationStart - loadEventEnd) I find that the loadEventEnd is 0 . But also found that the loadEventStart value is recorded .. I print these values on console inside window.onload = function() {} . . From the above stats I assume that my function is called after the load event has fired and before it has pleted .. However using onunload function gives me the result , the result cannot be viewed as it is printed in the console and unload event is triggered when moving away from the page .. Please help me find a solution .

Share Improve this question asked Feb 24, 2015 at 7:05 Nitin 411 gold badge1 silver badge6 bronze badges

Assuming this is just for debugging purposes, you can open another window and write the value to the other window's DOM. – jfriend00 Commented Feb 24, 2015 at 7:09
Some browsers support "preserve log" in their console. Turning that on will allow you to read onbeforeunload messages after navigating to a new page. – Phssthpok Commented Feb 24, 2015 at 7:13

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Most likely you're getting a value of 0 because you're printing the information before the page has pleted loading, try the following snippet:

window.onload = function(){
    setTimeout(function(){
        var t = performance.timing;
        console.log(t.loadEventEnd - t.responseEnd);
    }, 0);
}

That will make sure the numbers are printed after the page is actually ready. Got that snippet from here. Other information from that page you might find interesting:

Data from the API really es to life when events are used in bination:

Network latency (): responseEnd-fetchStart.

The time taken for page load once the page is received from the server: loadEventEnd-responseEnd.

The whole process of navigation and page load: loadEventEnd-navigationStart.

Use the onload attribute in the tag as follows:-

<body onload="methodName();">

Try the following example for better understanding:-

<html>
<head>
    <script type="text/javascript">
        function test(){
            alert("hello");
        }
    </script>
</head>
<body onload="test();">
    <h5>Simple javascript test for page load</h5>
</body>
</html>

Try the following. i hope it will also work... Use the window.onload object as follows:-

window.onload=function(){
                  //set of javascript statments...
              }

or if you have any functions then use the window.onload as follows:-

window.onload=function_name

Have a look at the following example for better understanding of window.location

<html>
<head>
    <script type="text/javascript">
        window.onload = test;

        function test(){
            alert("hello");
        }
    </script>
</head>
<body>
    <h5>Simple javascript test for page load</h5>
</body>
</html>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745066703a283030.html

javascriptcall function after complete page loadStack Overflow

最新回复(0)