当我们进行前端开发时，经常需要加载各种资源，比如图片、脚本等等。而在这个过程中，我们也会遇到一些问题，比如资源没有加载完成如何处理、如何判断资源是否加载完成等等。 这时候，一个名为 onloaded 的 npm 包就能够帮助我们解决这些问题，它能够让我们监听资源的加载状态，实现资源加载完成后的相应处理。
onloaded 简介
onloaded 是一个轻量级的 npm 包，它可以让你很容易地判断一些资源是否加载完成，比如图片、CSS、JavaScript 等等。它可以轻松地解决以下问题：
- 如何判断图片是否加载完成，以便随时使用?
- 在页面中，如何知道某个 JavaScript 文件是否完全加载好？
- 如何知道某个样式表已加载并可以被使用了？
onloaded 的主要优势是其轻量级，而它在使用也非常简单。我们只需要在代码中引用它，使用它的相关函数来判断是否完成即可。
安装 onloaded
在本地项目中，我们可以通过 npm 安装 onloaded，方法如下：
npm install onloaded --save
上述命令将 onloaded 安装到本地项目中，并将其添加到您项目的依赖列表中，以便在未来构建或部署时使用。
使用 onloaded
加载图片
在加载图片时，我们需要确认该图像是否已经加载完毕，以便在合适的时候进行后续操作，比如在页面上显示该图片。下面是一个基本的使用 onloaded 加载图片的示例代码：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- ------ - -------------- ----- ---------- - ------------------------------ -------------- - ------- ---------------------------- -- - --------------- --------- -------- -- --------------- ---
上述代码首先创建一个 img 元素，并为该元素赋予需要加载的图片的路径。接着，我们使用 onLoaded(imgElement) 方法用以判断图像是否已经加载完毕，当图像加载完成时，我们便可以进行接下来的操作。
加载样式表
在引入样式表的时候，我们需要首先确保该样式表已经加载完成，并且可以在我们的页面上进行使用。下面是一个基本的使用 onloaded 加载样式表的示例代码：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- -------- - -------------- ----- ----------- - ------------------------------- --------------- - ------------- ---------------- - ----------- ---------------- - --------- --------------------------------------- ----------------------------- -- - ---------------- ----------- ---------- -- --------------- ---
上述代码首先创建了一个 link 元素，并且在其 href 属性中指定需要加载的样式表路径。接着，我们将该元素添加到了页面的 head 中。最后，我们使用 onLoaded(linkElement) 方法用以判断样式表是否已经成功加载，当样式表加载完成时，我们就可以进行接下来的操作了。
加载 JavaScript
当我们引用一些 JavaScript 文件时，有时候我们需要等待该 JS 文件加载完成后进行相应操作。下面是一个基本的使用 onloaded 加载 JavaScript 的示例代码：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- --------- - ------------- ----- ------------- - --------------------------------- ------------------ - ------------------ ----------------- - ---------- ----------------------------------------- ------------------------------- -- - ----------------------- -- ------------ ---------- -- --------------- ---
上述代码创建了一个 script 元素，并设置了 src 属性为需要加载的 JavaScript 文件路径，之后将该元素添加到了页面 head 中。最后，我们使用 onLoaded(scriptElement) 方法用以判断 JavaScript 文件是否加载完成，当 JavaScript 加载完成后，就可以执行接下来的操作了。
总结
在前端开发中，我们常常需要用到资源加载，而常常会遇到资源没有加载完成的问题。 这时候，我们可以使用 onloaded 这个 npm 包，它可以帮助我们判断资源是否加载完成，并在资源加载完成后进行相应的操作。 hope you enjoy it!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc38b