How to Execute a Function When Page Has Fully Loaded

How to execute a function when page has fully loaded?

That's called load. It came waaaaay before DOM ready was around, and DOM ready was actually created for the exact reason that load waited on images.

window.addEventListener('load', function () {
  alert("It's loaded!")
})

How to run a function when the page is loaded?

window.onload = codeAddress; should work - here's a demo, and the full code:

<!DOCTYPE html><html>    <head>        <title>Test</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <script type="text/javascript">        function codeAddress() {            alert('ok');        }        window.onload = codeAddress;        </script>    </head>    <body>        </body></html>

How do I call a JavaScript function on page load?

If you want the onload method to take parameters, you can do something similar to this:

window.onload = function() {
  yourFunction(param1, param2);
};

This binds onload to an anonymous function, that when invoked, will run your desired function, with whatever parameters you give it. And, of course, you can run more than one function from inside the anonymous function.

How to make JavaScript execute after page load?

These solutions will work:

As mentioned in comments use defer:

<script src="deferMe.js" defer></script>

<body onload="script();">

document.onload = function ...

or even

window.onload = function ...

Note that the last option is a better way to go since it is unobstrusive and is considered more standard.

run js function after all scripts on page are fully loaded

I ended up finding a solution using a delay method (adapted from this SO answer).

Put the following in a custom.js file:

function delay() {
    setTimeout(function() {
        changeSize();
    }, 200);
}

if (document.readyState == 'complete') {
    delay();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            delay();
        }
    }
}

Then load the custom.js in base.html with:

<script type="text/javascript" src="{{ url_for('static', filename='custom.js') }}"></script>

This successfully waits until the long-loading script and related content is fully rendered, then executes the changeSize() function.

Executing a function once the page is fully loaded in AngularJS

You may want to use the ng-init directive:

<div ng-init="init()">...</div>

Define this function is your controller:

$scope.init = function() {
    alert("Page is fully loaded!);
}

Anyway, you can call this function directly from your controller. It will be call once the app and the controller are loaded.

How to Execute a Function When Page Has Fully Loaded