Javascript在加载异步资源

时间:2017-08-24 19:51:17

标签: javascript

当我通过优化器测试页面时,它建议我对我使用的所有CDN源使用async。

运行我使用的任何脚本

(function(){})();

我还使用内嵌script标记的javascript代码。如何运行内联脚本,如:

<script>
(function(){
jQuery.foundation();
ReactDOM.render(<App />,document.querySelector('#app'));
});
</script>

?我已经尝试过异步标记,但它不起作用。我有错误,不存在由异步加载的库。

2 个答案:

答案 0 :(得分:10)

将您的代码包装在:

SimpleJdbcCall

...不会延迟执行。要延迟脚本直到加载资源,请等待7.2.1 Setting ARRAY values using SqlArrayValue for an IN parameter

  

加载事件在文档加载过程结束时触发。此时,文档中的所有对象都在DOM中,所有图像 脚本 ,链接和子帧都已完成加载。

这是一个使用(function () { })(); 元素加载jQuery的示例,并通过内联脚本显示jQuery版本:

&#13;
&#13;
<script async>
&#13;
window.addEventListener('load', function () {
    console.log(jQuery.fn.jquery);
});
&#13;
&#13;
&#13;

要在加载特定 <script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>脚本时捕获事件,您可以收听自己的async事件。要实现这一目标,如果您将load提供给您感兴趣的id元素,则可能是最简单的,并确保内联代码位于其后:

&#13;
&#13;
script
&#13;
jq.addEventListener('load', function () {
    console.log(jQuery.fn.jquery);
});
&#13;
&#13;
&#13;

请注意,window load event对内联脚本没有影响:

  

如果<script id="jq" async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>属性不存在,则不得指定deferasync属性。

它们仅对具有src属性的script元素产生影响。

答案 1 :(得分:4)

如果我正确理解您的问题,您希望在加载异步脚本标记时运行内联脚本。

您可以使用脚本标记的onload事件。

&#13;
&#13;
function runInline() {
  console.log('inline script run')
}
&#13;
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" onload="runInline()"></script>
&#13;
&#13;
&#13;