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

Question

我用优化器测试了我的页面，它建议我对我使用的所有 CDN 源使用async属性，例如：

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

要运行我使用的任何脚本：

(function(){
})();

我在内联script标签中也有引用此类库的 JavaScript 代码。但是，当我如上所述添加async时，我在以下脚本中出现错误：

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

我也尝试将async添加到此script标签中，但它仍然不起作用。我仍然收到一个错误，指出加载了async属性的库不存在。

Answer 1

将代码包装在：

(function () {
})();

。不会延迟其执行。若要延迟脚本，直到加载资源，请等待窗口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(属性对内联脚本没有影响：

如果src属性不存在，则不得指定defer和async属性。

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

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>