how to make the browser wait for assets to load?

Question

I am loading scripts and style-sheets dynamically from javascript like this .

The problem is that browser does not wait for the script to load.

consider i have a function named functionToBeCalled() inside a script file named script-file.js

i have a function to load script file.

<script type="text/javascript">
   var listOfJavaScriptsLoaded = new Array();

    function LoadScriptFile(scriptUrl){
      var isScriptLoaded = false;
      var i = 0;
      for(i = 0; i < listOfJavaScriptsLoaded.length; i ++){
        if(listOfJavaScriptsLoaded[i] == scriptUrl){
           isScriptLoaded = true;
           break;
         }  
      } 
    if(isScriptLoaded == false){        
     var headTag= document.getElementsByTagName('head')[0];      
     var scriptTag= document.createElement('script');
     scriptTag.type= 'text/javascript';
     scriptTag.src= scriptUrl;
     headTag.appendChild(scriptTag);
     listOfJavaScriptsLoaded.push(scriptUrl);
    }
    }
   LoadScriptFile("script-file.js");
   functionToBeCalled();
</script>

now, what happens is that the browser does not wait for the script tag to load and goes to the next command. I get a " undefined functionToBeCalled() " error. this is natural. But the fact is that when i inspect in firebug, the script tag has been formed and the file has loaded.

So how do i make the browser to pause loading and resume after the asset has been loaded?

Edit1: This problem occurs only when i am loading the page in ajax and not in normal page loads

Edit2: Or is there a possibility to read a script/css file from javascript and write it directly in the markup within script tags

If i use window.stop() the loading stops completely. how can i make it resume from the same line?

Or is it possible to make the browser to consider that the loading is still happening and reset it in the onload event?

Answer 1

You may have specific reasons to load the script dynamically, but to present the option, if you write out the script element in your HTML output like so:

<script src="script-file.js"></script>
<script>functionToBeCalled();</script>

the browser will halt parsing until that script has been loaded, and interpreted.

This is also valid in the BODY .

Answer 2

Check out LABjs ( http://labjs.com/ ) by Getify Solutions. LABjs allows script-inserted scripts to be loaded concurrently but run in order.

Answer 3

pretty much every tag which loads a resource has an onload event. so in plain javascript this means in your case something like this:

var s = document.createElement('script');
s.src = "script-file.js";
s.type = 'text/javascript';
head.appendChild(s);

s.onload = function(){
    functionToBeCalled();
}

Answer 4

I would recommend looking at Cuzillion . It will allow you to experiment with calling javascript and css in many different ways to see how they react in the browser.

This should answer your question. Just execute it before your page is done loading the body .

<script type="text/javascript">
    var loadScriptFile = (function(){
        var listOfJavaScriptsLoaded = [];

        return function(scriptUrl){
            var isScriptLoaded = false;
            for(var i = 0; i < listOfJavaScriptsLoaded.length; i ++){
                if(listOfJavaScriptsLoaded[i] == scriptUrl){
                    isScriptLoaded = true;
                    break;
                }
            }
            if(!isScriptLoaded){
                document.write('<scr' + 'ipt type="text/javascript" src="' + scriptUrl + '"></scr' + 'ipt>');
            }
        };
    }());
    loadScriptFile("script-file.js");
    functionToBeCalled();
</script>