技术文摘

HTML引入外部JS文件后如何确保JS文件加载完再执行方法

2025-01-09 16:35:16 小编

HTML引入外部JS文件后如何确保JS文件加载完再执行方法

在前端开发中，HTML引入外部JS文件是常见操作。但很多时候，我们需要确保JS文件完全加载完成后再执行相关方法，否则可能会出现各种问题，比如找不到对象、方法未定义等。那么，该如何做到这一点呢？

最常用的方法之一是使用script标签的defer属性。当在script标签中设置defer属性后，脚本会在文档解析完成后、DOMContentLoaded 事件触发之前执行，并且会按照脚本在文档中出现的顺序执行。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script defer src="yourScript.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这样，yourScript.js中的代码会在HTML文档解析完毕后执行，能有效避免因文档未解析完成而导致的问题。

另一个方法是利用async属性。与defer不同，async属性会使脚本在下载完成后立即执行，不会按照脚本在文档中的顺序执行。不过它同样能保证在脚本执行时文档已解析完成。代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script async src="yourScript.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

如果想通过代码逻辑来控制，还可以使用DOMContentLoaded事件。在window对象的DOMContentLoaded事件中执行需要的方法，这样可以确保在文档的DOM结构加载完成后再执行代码。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="yourScript.js"></script>
</head>
<body>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            // 在这里调用 yourScript.js 中的方法
            yourFunction(); 
        });
    </script>
</body>
</html>

对于一些需要等待图片等资源也加载完成后再执行的复杂场景，可以使用Promise来处理。通过创建一个Promise对象，在所有资源加载完成后再执行相应的方法。

在HTML引入外部JS文件后，通过合理运用defer、async属性，结合DOMContentLoaded事件以及Promise等方法，我们就能灵活地确保JS文件加载完再执行方法，从而提高前端代码的稳定性和可靠性，为用户提供更好的体验。

TAGS: HTML_JS文件加载 JS文件执行 JS加载优化 HTML_JS交互

万千站长工具

技术文摘