javascript - 如何让浏览器等待 Assets 加载?

标签 javascript jquery html css browser

我正在从 javascript 动态加载脚本和样式表,例如 this .

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

假设我在名为 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事件中重新设置?

最佳答案

您可能有特定的原因要动态加载脚本,但要显示选项,如果您像这样在 HTML 输出中写出脚本元素:

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

浏览器将停止解析,直到该脚本被加载和解释。

这也是有效的 in the BODY .

关于javascript - 如何让浏览器等待 Assets 加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4123002/

相关文章:

Javascript "this"变量混淆

javascript - jquery ajax返回HTML元素

javascript - 从 JsTree 选择填充文本字段

html - 如何使用图标和缩进布局 html 文本

php - 使用 AJAX 将数据回显到下拉列表中

jquery - 通过 jQuery 选择单个 slider 元素而不是全部

javascript - 使用 Express 实现 React

javascript - jQuery 巨大的选择框导致 Uncaught RangeError : Maximum call stack size exceeded

javascript - jQuery 模式对话框未以位置标志居中

javascript - 向溢出容器的内容添加渐变淡入淡出