脚本上的“加载”事件具有异步和/或延迟

问题描述 投票:8回答:1

嵌入脚本时:

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

有没有办法知道他们什么时候装完?

通常在调用window.load事件时,人们会期望所有脚本都准备就绪。但我不知道当你用asyncdefer加载它们时是否仍然存在。我在线阅读了一些文档,但在这个问题上找不到任何结论。

javascript html html5
1个回答
18
投票

回答: 您可以利用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加载后立即出现。

Edit: added important information originally from comment.

window.onload在发射前等待加载所有内容,而document.onload在文档对象模型(DOM)准备就绪时触发。

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

总结一下:

  • window.onload将考虑异步脚本。
  • document.onload不会考虑异步脚本。
© www.soinside.com 2019 - 2024. All rights reserved.