Javascript在加载异步资源后运行内联脚本

Question

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

运行我使用的任何脚本

(function(){})();

我也使用内联script标签的javascript代码.如何运行内联脚本,如:

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

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

Answer 1

将代码包装在:

(function () {
})();

......不会延迟执行.要延迟脚本直到加载资源,请等待窗口load事件:

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

下面是一个使用<script async>元素加载jQuery的示例,并通过内联脚本显示jQuery版本:

window.addEventListener('load', function () {
    console.log(jQuery.fn.jquery);
});

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

要在加载特定 async脚本时捕获事件,您可以听取自己的load事件.为了实现这一点,如果你给出你感兴趣id的script元素,那么它可能是最容易的,并确保内联代码在它之后:

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

<script id="jq" async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意,async(和defer)属性对内联脚本没有影响:

的defer和async如果属性不能指定src属性不存在.

它们仅对具有script该src属性的元素有影响.

Answer 2

如果我正确理解了您的问题，那么您想在加载异步脚本标记时运行内联脚本。

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

function runInline() {
  console.log('inline script run')
}

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" onload="runInline()"></script>