Question

我正在从this这样的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>

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

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

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

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

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

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

Answer 1

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

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

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

这也是有效的in the 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>

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

4 个答案: