如何让浏览器等待资产加载？

Question

我从像JavaScript加载脚本和样式表动态此 。

问题是浏览器不等待脚本加载。

我认为我在一个名为script-file.js的脚本文件中有一个名为functionToBeCalled（）的函数

我有一个加载脚本文件的功能。

<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>

现在，会发生什么是浏览器不等待脚本标记加载并转到下一个命令。 我收到“ 未定义的functionToBeCalled（） ”错误。 这很自然。 但事实是，当我在firebug中检查时，脚本标签已经形成并且文件已经加载。

那么如何让资源加载后浏览器暂停加载和恢复？

Edit1：仅当我在ajax中加载页面而不是在正常页面加载时才会出现此问题

Edit2：或者是否有可能从javascript中读取脚本/ css文件并将其直接写入脚本标记内的标记中

如果我使用window.stop（），则加载完全停止。 我如何让它从同一行恢复？

或者是否可以让浏览器考虑加载仍在发生并在onload事件中重置？

Answer 1

如果您在HTML输出中写出脚本元素，则可能有特定的理由动态加载脚本，但要显示该选项：

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

浏览器将暂停解析，直到该脚本加载并解释为止。

这在BODY中也有效。

Answer 2

查看Getify Solutions的LABjs（ http://labjs.com/ ）。 LABjs允许同时加载脚本插入的脚本，但按顺序运行。

Answer 3

几乎每个加载资源的标签都有一个onload事件。 所以在普通的javascript中这意味着在你的情况下这样的事情：

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

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

Answer 4

我建议看看Cuzillion 。 它允许您尝试以多种不同方式调用javascript和css ，以查看它们在浏览器中的反应。

这应该回答你的问题。 之前做你的网页加载只是执行它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>