当我通过优化器测试页面时,它建议我对我使用的所有CDN源使用异步。
运行我使用的任何脚本
(function(){})();
我也使用内联script
标签的javascript代码。如何运行内联脚本,如:
<script>
(function(){
jQuery.foundation();
ReactDOM.render(<App />,document.querySelector('#app'));
});
</script>
?我已经尝试过异步标记,但它不起作用。我有错误,不存在由async加载的库。
将代码包装在:
(function () {
})();
......不会延迟执行。要延迟脚本直到加载资源,请等待window load
event:
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
(and defer
) attributes对内联脚本没有影响:
如果不存在
defer
属性,则不得指定async
和src
属性。
它们只对具有script
属性的src
元素有影响。
如果我正确理解您的问题,您希望在加载异步脚本标记时运行内联脚本。
您可以使用脚本标记的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>