Adam Adam - 2 months ago 13
Ajax Question

Load multiple JS files sequently after page load

To speed up the page loading time, I want to load the JS scripts after the page content has loaded.

I found this helpful article which explains how to do this when you have a single JS file: https://varvy.com/pagespeed/defer-loading-javascript.html

The solution goes like this:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "yourSingleJSFile.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>


In my case, I have 4 different js files: jQuery, main.js and index.js that are starting with
$(document).ready(...);
and define a function initMap(), and maps.googleapis.com. Therefore I changed the code to

function downloadJSAtOnload() {

var element = document.createElement("script");
element.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "/resources/js/main.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "/resources/js/index.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap";
document.body.appendChild(element);


Each time I load the page, I find a JS error in the console. There are two errors that I spotted so far:

First


ReferenceError: $ is not defined index.js:9:5


I don't understand what is happening here. It seems like index.js was included before jquery was loaded. But how come the error is not thrown in main.js?

Second


validValueError: initMap is not a function


It seems to me that googleapis.com js is already loaded but index.js is missing (since I define function initMap() there).




How can I force the scripts to load sequently after the page content has loaded?

Answer

If the scripts have dependencies towards each other you need to make sure that the dependencies loads first. You can nest the script loading like so:

var jqueryElement = document.createElement("script");
jqueryElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";

var mainElement = document.createElement("script");
mainElement.src = "/resources/js/main.js";

var indexElement = document.createElement("script");
indexElement.src = "/resources/js/index.js";

var googleApiElement = document.createElement("script");
googleApiElement.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap";

// add the first script element
document.body.appendChild(jqueryElement);

jqueryElementElement.onload = function () {
  document.body.appendChild(googleApiElement);
}

googleApiElement.onload = function () {
  document.body.appendChild(mainElement);
  document.body.appendChild(indexElement)
}

I'm just guessing your dependency order.