在前端开发中,我们常常需要在 DOM 完全加载后执行某些操作。而 when-dom-ready 就是一个 npm 包,可以让我们很方便地实现这个功能。
安装
在终端运行以下命令安装 when-dom-ready:
--- ------- ------ --------------
使用
使用 when-dom-ready 很简单,只需要将需要在 DOM 加载完成后执行的函数传入即可:
----- ------------ - -------------------------- --------------- -- - ---------------- -- -------- ---
实现原理
当我们将需要执行的函数传入 whenDomReady 函数中时,它首先判断当前 document 是否已经加载完成。如果已经加载完成,就直接执行传入的函数;如果还没有加载完成,使用 document.addEventListener 监听 load 事件,当 document 加载完成后执行传入的函数。
示例代码
以下是一个完整的示例代码,包括在 DOM 加载完成前和完成后分别执行不同的函数:
--------- ----- ----- ---------- ------ ----- ---------------- --------------------- ---------- ------- ------ ------------------ ------- ---- ------------------ ------- -------------------------- ------- -------
----- ------------ - -------------------------- ----- --------- - -- -- - ----- ------ - ---------------------------------- ----- --- - ------------------------------ --------------- - -------- ---------------- - -------- ------------------------- - ------ ------------------------ -- --------------- -- - ---------------- -- -------- ------------ --- ------------------- --- -- -------- ------------
当我们运行这个示例代码时,控制台输出的内容如下:
------ --- -- ----- --- -- -----
可以看到,当 DOM 还没有加载完成时,createBox 函数会报错,但是当 DOM 加载完成后,createBox 函数就可以正常执行了。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005597e81e8991b448d70c9