开发者社区> futaosmile> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何在DOM元素加载完毕后执行js代码以及DOM加载过程

简介: 最近在写一个动态菜单。即,根据用户角色权限生成菜单选项。动态菜单采用js进行html代码拼接,再append到相应的节点。但是存在一个问题,就是菜单功能的js代码会在DOM元素加载完成之前执行,也就是菜单生成之前执行,所以所有绑定的菜单点击事件都不能执行。
+关注继续查看

最近在写一个动态菜单。即,根据用户角色权限生成菜单选项。动态菜单采用js进行html代码拼接,再append到相应的节点。但是存在一个问题,就是菜单功能的js代码会在DOM元素加载完成之前执行,也就是菜单生成之前执行,所以所有绑定的菜单点击事件都不能执行。

认识DOM和DOM加载过程以及如何让DOM加载完成后再执行js脚本文件

<b>DOM加载过程:</b>
网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤:
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.构造HTML DOM模型
5.加载图片等外部文件
6.页面加载完毕

从以上顺序可以看出,js等脚本会在DOM文档构造之前执行,这样js就无法访问DOM文档对象模型。所以一般把可执行脚本放在页面初始化事件处理函数中,这样能确保文档加载完毕后再执行脚本。所以我们一般这样写:
window.onload = function(){//执行脚本}
window.onload表示页面加载完了后(包括dom和js)

img_f78bbe8216b1bb9be74eeaa356b1cd01.png
window.onload = function(){//执行脚本}

这样的话,这段js代码将会在DOM元素加载完毕之后进行菜单点击事件的绑定。

这个问题调试了很久很久,最后一行代码就解决了。233...
代码真是需要多写,多累积经验。感触太深了。QAQ

window.onload大法好啊!

6-1

谈谈document.ready和window.onload的区别

在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

原文地址:谈谈document.ready和window.onload的区别

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Juc13_JVM-JMM-CPU底层执行全过程、缓存一致性协议MESI
①. JVM-JMM-CPU底层执行全过程 ②. 缓存一致性协议
56 0
SAP成都研究院小伙伴们开发的一个SAP C4C POC - 通过名片扫描的方式录入联系人数据到系统
SAP成都研究院小伙伴们开发的一个SAP C4C POC - 通过名片扫描的方式录入联系人数据到系统
54 0
使用web3j加载以太坊智能合约如何指定证书Credentials?
我正在使用web3j库来生成一个用于我的solidity以太坊智能合约的Java封装包,我已经将该智能合约部署到区块链中,并且它已经被挖掘,现在我想使用Java封装包在Java中加载该以太坊智能合约。
1735 0
用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用到项目中 前文列表 用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写...
1314 0
几个比较”有意思“的JS脚本
1.获取内网和公网真实IP地址(引用地址) Demo for: https://github.
691 0
+关注
futaosmile
热爱技术与分享
98
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载