在前端开发中，我们经常需要加载 JavaScript 文件来实现一些功能。但是，在实际开发过程中，有时可能会遇到 JavaScript 文件没有被正确加载的情况，导致相关功能无法正常使用。因此，检测 JavaScript 文件是否被加载就变得非常重要了。
本文将介绍几种常见的检测 JavaScript 文件是否被加载的方法，并提供相应的示例代码和详细说明。
方法一：利用浏览器控制台
浏览器控制台可以帮助我们查看当前页面中加载的所有资源文件，包括 CSS、JavaScript 等。我们可以通过以下步骤来检测 JavaScript 文件是否被加载：
- 打开浏览器控制台；
- 切换到 Network 标签页；
- 刷新当前页面；
- 查找对应的 JavaScript 文件，如果该文件显示为 200 状态码，则表示该文件已经被加载成功。
下面是一个简单的示例代码，展示如何在浏览器控制台中检测 JavaScript 文件是否被加载：
console.log('检测 JavaScript 是否被加载');
if (typeof jQuery === 'undefined') {
console.log('jQuery 未被加载');
} else {
console.log('jQuery 已被加载');
}方法二：利用 DOMContentLoaded 事件
DOMContentLoaded 事件会在 DOM 加载完成后触发，而 JavaScript 文件的加载一般会在 DOM 加载完成之前完成。因此，我们可以通过监听 DOMContentLoaded 事件来检测 JavaScript 文件是否被加载成功。
下面是一个简单的示例代码，展示如何利用 DOMContentLoaded 事件检测 JavaScript 文件是否被加载：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------- -------------
-------
------
---- ---------------
------- -----------------------------------------------------------
------- -------------------------
--------
--------------------------------------------- -------- -- -
-- ------- ------ --- ------------ -
------------------- -------
- ---- -
------------------- -------
-
---
---------
-------
-------方法三：利用 onload 事件
onload 事件会在页面中所有资源文件加载完成后触发，因此我们也可以通过监听 onload 事件来检测 JavaScript 文件是否被加载成功。
下面是一个简单的示例代码，展示如何利用 onload 事件检测 JavaScript 文件是否被加载：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------- -------------
-------
------
---- ---------------
------- -----------------------------------------------------------
------- --------------- ------------------------------- -------------------
-------
-------总结
以上就是三种常见的检测 JavaScript 文件是否被加载的方法，每种方法都有各自的优缺点。不同的场景下可以选择不同的方法来进行检测，以达到最佳效果。
同时，在实际开发中，我们还需要注意一些细节问题，比如缓存、跨域等。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24420