提问人：vbrin27 提问时间：10/31/2023 更新时间：10/31/2023 访问量：52
Lazy加载多个 JS 文件
LazyLoading Multiple JS Files
问：
我懒惰地加载了多个脚本文件。我想在所有文件按顺序加载时调用 allJsLoaded（） 方法。由于脚本文件是同步加载的，监听最后一个脚本标签的onload事件就足够了吗？或者有没有更好的方法来实现同样的目标？
//Below are the script tags I create dynamically and add it to headtag
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js" onload="allJsLoaded()"></script>
答：
0赞
Kevin
10/31/2023
#1
如果脚本文件是同步加载的（即一个接一个，按顺序），则侦听最后一个脚本标记的 onload 事件应该足以确保在调用 之前加载所有脚本。allJsLoaded()
此方法假定脚本加载时没有任何错误，并且它们不会操作加载顺序或执行流。如果可能不满足这些条件中的任何一个，则应考虑 。additional error handling
请记住，在某些情况下，特别是当脚本从不同的域加载或具有其他复杂的依赖项时，您可能会遇到 .在这种情况下，您可能需要使用更高级的脚本加载技术或模块加载器，例如 .onload event due to cross-origin restrictionsRequireJS
1赞
Veterini
10/31/2023
#2
你可以像这样使用 defer ： https://www.w3schools.com/tags/att_script_defer.asp
<script type="text/javascript" src="file3.js" onload="allJsLoaded()" defer />
另外，我不是特别喜欢在“onload”上使用函数。
如果你想确保所有内容都已加载，请改用 eventListener：
document.addEventListener("load", function(){
//....
});
使用此文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
当我在事件侦听器上时，您也有此事件：
document.addEventListener("DOMContentLoaded", function(){
//....
});
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
评论
0赞
Veterini
10/31/2023
如果使用了 eventListener，则 defer 并不是真正有用的。但是，由于在页面完全解析后延迟加载脚本，因此我会说它或多或少是相同的，因为它应该保证脚本不会在之前调用的脚本之后加载，不是吗？我用它来确保加载 dom 内容时过早加载错误而无法检测字段，据我所知，它确实奏效了。
评论