window.onload和document.ready
浏览器解析大致有以下几个步骤:
(1) 解析HTML结构
(2) 加载外部脚本和样式
(3) 解析并执行脚本代码
(4) 构造HTML DOM 模型
(5) 加载图片等外部文件
(6) 界面加载完成
window.onload会在页面所有内容加载完成之后执行(第6步之后),比如图片等对媒体文件。如果媒体文件较多,即时网页文档已经显示,但load事件不会触发。
document.ready会在DOM绘制完毕后执行(第4步之后),能确保文档呈现和脚本初始化同时完成。
window.onload只能写一次,而document.ready可以写多次。
1 <script type="text/javascript"> 2 //只会显示load2 3 window.onload=function () { 4 alert("load1") 5 } 6 window.onload=function () { 7 alert("load2") 8 } 9 </script>
1 <script type="text/javascript"> 2 //都会执行 3 $(document).ready(function () { 4 alert("ready1") 5 }) 6 $(document).ready(function () { 7 alert("ready2") 8 }) 9 //简化形式 10 $(function () { 11 alert("ready3") 12 }) 13 </script>
本博客文章均已测试验证,欢迎评论、交流、点赞。
部分文章来源于网络,如有侵权请联系删除。
转载请注明原文链接:https://www.cnblogs.com/sueyyyy/p/9325548.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix