How do I execute Javascript only after a deferred Javascript external file has loaded?

Question

I want to defer loading of an external Javascript file until the page has loaded (and also I don’t want to block rendering if those external resources cannot be loaded). So I have this line

<script type="text/javascript" src=“//external.otherdomain.com/path/js/myresoures.js" defer></script>

However, when this file does eventually load, I want to run the following …

<script type="text/javascript">_satellite.pageBottom();</script>

However, as is, the above may run before the script has loaded. How do I run the above (or any) Javascript only after a remote resource has loaded? Keep in mind that if the external resource doesn’t load (it times out, for example), I don’t want to run the Javascript.

Thanks, - Dave

Vinny M · Accepted Answer · 2016-02-19 22:49:46Z

1

This can be achieved by an onload function.

You can dynamically load each... This example is pulled right from MDN. It will insert your external resource above the script you call importScript() then launch the callback after loading.

sSrc = your external script, fOnload = the callback

function importScript (sSrc, fOnload) {
  var oScript = document.createElement("script");
  oScript.type = "text\/javascript";
  oScript.defer = true;
  if (fOnload) { oScript.onload = fOnload; }
      document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
  oScript.src = sSrc;
}

Usage:

importScript("//external.otherdomain.com/path/js/myresoures.js", function () { _satellite.pageBottom(); });

Or if jQuery is an option, use .getScript() like so:

$.getScript( "//external.otherdomain.com/path/js/myresoures.js", function () {_satellite.pageBottom();} );

Either of these options can be used in a <script> at the end of the page, after the fold as they say, ensuring the entire DOM loads first.

edited Feb 19, 2016 at 22:49

answered Feb 19, 2016 at 21:16

Vinny M

7704 silver badges14 bronze badges

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

1 Comment

crenshaw-dev Over a year ago

jQuery's getScript does not load the resource as deferred.

BakGat · Accepted Answer · 2016-02-19 21:15:20Z

0

You can use jQuery's $(window).load();

see: http://api.jquery.com/load/

answered Feb 19, 2016 at 21:15

BakGat

6812 gold badges6 silver badges19 bronze badges

Collectives™ on Stack Overflow

How do I execute Javascript only after a deferred Javascript external file has loaded?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related