Load javascript in consecutive order after browser load event

Question

What am I trying to do? In an attempt to speed up my website I am loading non-essential javascript after the browser load event. (So the JS files are not render blocking) This is currently functioning correctly.

What is the problem? The problem is sometimes the non-essential javascript depends on other libraries and plus those libraries need to load first.

What have I tried to do to fix the problem? In an attempt to fix the problem I have added a delay event to library dependent javascript. While this works sometimes, the load times of a JS file varies between refreshes and at times can load before the library even with a delay.

QUESTION: Does anyone know of a better way for me the load JS files only after the first JS file has loaded? (See code below)

<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); var element2 = document.createElement("script"); var delay=40; element.src = "http://119.9.25.149/sites/all/themes/bootstrap/bootstrap_nova/js/highcharts.js"; element2.src = "http://119.9.25.149/sites/all/themes/bootstrap/bootstrap_nova/js/future-plastic.js"; document.body.appendChild(element); setTimeout(function(){ document.body.appendChild(element2); },delay); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

As you can see from the above, I am trying to load the highcharts js file before I load the future-plastic file.

Use a module loader like browserify or requirejs

HelloWorld
– HelloWorld

2015-06-15 00:16:33 +00:00
Commented Jun 15, 2015 at 0:16 — HelloWorld
– HelloWorld, Commented Jun 15, 2015 at 0:16

Steven Lacks · Accepted Answer · 2015-06-15 00:36:01Z

You're not the first to have this problem, thankfully. There's a lot of difficult solutions around this problem, including using a module loader as suggested in the comment (which I agree is the best long term solution, because they account for more browsers and flexibility, but it's a lot to learn to solve one small problem).

The place to start learning about this problem and the ways to tackle it are all over the web. This is a pretty good resource: http://www.html5rocks.com/en/tutorials/speed/script-loading/

You may want to try defer if you don't have to support Opera Mini or IE9. Or, you can load sync and execute as it loads- their examples is this:

[ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); });

The reason why this might work (different browser implement this differently) is because the default is to load dynamically generated script tags are set to async by default, if you set it to false: "they’re executed outside of document parsing, so rendering isn’t blocked while they’re downloaded"

StackSlave · Accepted Answer · 2015-06-15 00:41:47Z

You should use ScriptElement.onload:

var pre = onload; onload = function(){ if(pre)pre(); var doc = document, bod = doc.body; function C(t){ return doc.createElement(t); } function downloadJSAtOnload(){ var s = C('script'), ns = C('script'), h = doc.getElementsByTagName('head')[0]; var u = 'http://119.9.25.149/sites/all/themes/bootstrap/bootstrap_nova/js/'; s.type = ns.type = 'text/javascript'; s.src = u+'highcharts.js'; h.appendChild(s); s.onload = function(){ ns.src = u+'future-plastic.js'; h.appendChild(ns); } } downloadJSAtOnload(); }

Note: The first onload is window.onload, since window is implicit.

Thanks for the reply. Do you mind explaining the above a little further? How does it work?

Collectives™ on Stack Overflow

Load javascript in consecutive order after browser load event

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related