Call JavaScript Function After Script Is Loaded

Call javascript function after script is loaded

you can achieve this without using head.js javascript.

function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {  // only required for IE <9
    script.onreadystatechange = function() {
      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName( "head" )[0].appendChild( script );
}


// call the function...
loadScript(pathtoscript, function() {
  alert('script ready!'); 
});

How to run function after script load

Answering my own very old question:

let script = document.createElement("script");
script.src = "https://example.com/script.js";
script.onload = loadStuff;
document.head.append(script);

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.

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.

How to call javascript function from <script> tag?

Short answer: Yes.

As long as you load the first script containing the function first, you can call the function anywhere, as long as it's loaded first.

<script src="file1.js" type="text/javascript"></script> 
<script src="file2.js" type="text/javascript"></script>

In this example, make sure file1.js contains your largeFunction() function. You can then call largeFunction(); inside file2.js.

You can also do this:

<script src="file1.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

Just make sure your FIRST script contains the function.

How to run a Javascript function after a specific JS has loaded?

function loadBackupScript(callback) {
    var script;
    if (typeof callback !== 'function') {
       throw new Error('Not a valid callback');  
    }
    script = document.createElement('script');
    script.onload = callback;  
    script.src = 'http://www.geoplugin.net/javascript.gp';
    document.head.appendChild(script);
}

loadBackupScript(function() { alert('loaded'); });

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.

Loading scripts after page load?

So, there's no way that this works:

window.onload = function(){
  <script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>
};

You can't freely drop HTML into the middle of javascript.

If you have jQuery, you can just use:

$.getScript("http://jact.atdmt.com/jaction/JavaScriptTest")

whenever you want. If you want to make sure the document has finished loading, you can do this:

$(document).ready(function() {
    $.getScript("http://jact.atdmt.com/jaction/JavaScriptTest");
});

In plain javascript, you can load a script dynamically at any time you want to like this:

var tag = document.createElement("script");
tag.src = "http://jact.atdmt.com/jaction/JavaScriptTest";
document.getElementsByTagName("head")[0].appendChild(tag);

Call JavaScript Function After Script Is Loaded