Question

I need to dynamically load several JavaScript file assets in a very specific order after a page has loaded. I’m trying to use onload, but this seems to fire before the asset has fully loaded. How should I adjust the below script to fire a proper callback to load the next script?

Note: Only needs to work in the latest Chrome, Firefox, Safari, and IE9.

function loadAssets() {
    // Setup script
    var scriptJS = document.createElement('script');
    scriptJS.type = 'text/javascript';
    scriptJS.src = objectUrl;

    scriptJS.onload = loadAssetsNext();

    // Begin insertion
    var headerJS = document.getElementsByTagName('HEAD');
    headerJS[0].appendChild(scriptJS);
},
function loadAssetsNext() {
    // Increment object counter
    objectsCount++;
    
    // Test to see if you should call another item
    if ((objectsCount) < objects.length) {
        // Setup script
        var scriptJS = document.createElement('script');
        scriptJS.type = 'text/javascript';
        scriptJS.src = nextObjectUrl;
        
        // Declare callback to fire after script has fully loaded
        scriptJS.onload = loadAssetsNext();
    
        // Begin insertion
        var headerJS = document.getElementsByTagName('HEAD');
        headerJS[0].appendChild(scriptJS);
    }
}

What I need is something like scriptJS.fullyLoaded = doStuff. Have no clue where to go from here though.

PS: jQuery is not an option or another library. You should be able to do this by slightly modifying the above script.

Answer 1

The reason your onload event is firing immediately is that you are calling it, not assigning it.

scriptJS.onload = loadAssetsNext();

This just assigns the returned value from the call to loadAssetsNext to the property onload of the scriptJS object. What you are intending to do is:

scriptJS.onload = loadAssetsNext;

That sets the onload handler to be the loadAssests function. This should take care of your issues.