JS Script Loading

Question

I am working on js script loading techniques and want to show a custom loader while all my content/resources are loading. Below is working as far as I can tell to load js scripts in order but my web app is throwing some errors after it starts.

My question is: how is the below script (which is called as a <script> right after jQuery at the bottom of my HTML) different from simply having all these js scripts called as <script>'s in the head of the HTML? Why errors on one but not the other?

$(document).ready(function(){
    jLoader(scripts[0]);
});
var i = 0;
function jLoader (script){
    return $.ajax({
                method: "GET",
                dataType: "script",
                url: script,
                context: document.body,
                cache:true,
        }).done(function() {
        console.log(script + ' loaded!');
        step();
        }
    });
}

function step(){
    i = i + 1;
    jLoader(scripts[i]);
}

var scripts = ['js/materialize.js','http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js','js/leaflet.awesome-markers.js',    
    'js/bouncemarker.js','https://cdn.firebase.com/js/client/2.3.1/firebase.js','js/geofire.min.js','js/myScript.js'];

Well including scripts using the script tag is more efficient, but if you're making a plugin or something similar and you don't want users to have to include a whole bunch of other files then you could do something like what you've done, though there are better ways to go about it. — user4639281
– user4639281, Commented Nov 2, 2015 at 18:00

Stefan Dochow · Accepted Answer · 2015-11-02 18:01:30Z

1

There is a closing curly brace too much after step();

When you put the variable definitions on top it should work::

var i = 0;
var scripts = ['http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js','https://cdn.firebase.com/js/client/2.3.1/firebase.js'];
$(document).ready(function(){
    jLoader(scripts[0]);
});

function jLoader (script){
    return $.ajax({
                method: "GET",
                dataType: "script",
                url: script,
                context: document.body,
                cache:true,
        }).done(function() {
        console.log(script + ' loaded!');
        step();
    });
}

function step(){
    i = i + 1;
    jLoader(scripts[i]);
}

At least here it does: http://jsfiddle.net/adweqcm2/

But remember: in production environments it is recommendable to concatenate your scripts.

answered Nov 2, 2015 at 18:01

Stefan Dochow

1,4541 gold badge10 silver badges11 bronze badges

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

5 Comments

Ronnie Smith Over a year ago

Thanks. Re concatenation, there are a few that are available on CDN, like firebase. But, yea, that is what I have read as well - to pack them all into a single js file. I understand that is how requirejs prepares them.

Ronnie Smith Over a year ago

The thing is, the script as shown runs fine (per the console feedback) but my app fails. When I put all the js back into the header as <script>'s all the errors go away and my app runs fine.

Stefan Dochow Over a year ago

Then your problem might be somewhere else. maybe te order of scripts causes errors? the code is correct. not only the console proves it but the scripts actually do get loaded

Ronnie Smith Over a year ago

That's what I can't figure out... Same order as using <script> tags in head but the web app throws errors when using the jLoader script. As for order, I would think that the ajax.done would ensure order? I dunno...

Stefan Dochow Over a year ago

well I did answer your question and solved teh issue you described. The rest of your description is very vague. The code as posted works.

Collectives™ on Stack Overflow

JS Script Loading

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related