javascript - "Load"带有异步和/或延迟的脚本事件

Question

嵌入脚本时:

<script src="..." async defer></script>

有没有办法知道他们何时完成加载？

通常当 window.load 事件被调用时，人们会期望所有脚本也准备就绪。但我不知道当您使用 async 或 defer 加载它们时，这是否仍然成立。我已经在线阅读了一些文档，但找不到关于这个问题的任何结论。

Answer 1

答案:
您可以利用 onload 事件属性在加载脚本后执行某种回调。

示例:
在下面的示例 html 脚本元素中，当脚本(来自 google api 的 jquery 库)完成异步加载时，将弹出一条警告，提示 “资源已加载”.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async defer onload="alert('resource loaded');">

注意:src 脚本将加载得非常快，因为它由 google 托管，因此弹出窗口很可能会在页面/DOM 加载后立即出现。

编辑:添加了最初来自评论的重要信息。

window.onload 在触发之前等待一切 加载，而 document.onload 在文档对象模型 (DOM) 准备就绪时触发。

因此，如果您有异步脚本，document.onload 将首先执行，而 window.onload 将等待那些异步脚本完成加载。

总结:

• window.onload 将考虑异步脚本。
• document.onload 不会考虑异步脚本。