document load 和 document ready 的区别

简介: document load 和 document ready 的区别


       文档解析过程中,ready在加载图片等外部资源前触发,load在之后触发。如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready

DOM文档解析:

  1. 解析html结构
  2. 加载脚本和样式文件
  3. 解析并执行脚本
  4. 构造html的DOM模型 // ready
  5. 加载图片等外部资源文件
  6. 页面加载完毕 // load


页面加载完成有两种事件

1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数

缺点:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响

代码形式:


//document load
$(document).load(function(){
    ...code...
})

 

2.$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行

在原生的jS中不包括ready()这个方法,Jquery才有,jquery中有 $().ready(function)。

代码形式为:


//document ready
$(document).ready(function(){
    ...code...
})
//document ready 简写
$(function(){
    ...code...
})


相关文章
|
3月前
|
人工智能 网络协议 网络性能优化
【洛神公开课】第6期:AI网络白皮书-02训练网络篇
阿里云AI训练网络“三层引擎”(Scale-Up/Out/Across)突破万卡集群瓶颈:NVLink实现单机8卡全互联,HPN+eRDMA将跨机通信时延压至2μs,CEN+TR支撑跨域Tbps级协同。三者协同达成96%线性加速比,显著破解GPU空转难题。(239字)
716 1
|
5月前
|
人工智能 机器人 测试技术
用 Bub 和飞书搭一个更懂群聊上下文的小机器人
手把手教你搭建 Bub:一个懂群聊上下文、无“班味”的轻量化 AI 助理。
565 1
用 Bub 和飞书搭一个更懂群聊上下文的小机器人
|
人工智能 开发框架 安全
全球领头CRM,如何在中国跑出新模式?
企业韧性在于稳住基本盘并寻找增量机会,客户经营是关键。CRM从早期的信息记录工具,发展为驱动业务增长的核心引擎。Salesforce与阿里云合作,将全球领先的CRM能力引入中国,推出适配本地需求的解决方案。双方在功能对等、数据安全、销售服务、全球化支持和定制化开发等方面深度协作,助力企业实现智能化客户经营。通过融合AI技术,如通义千问,进一步提升用户体验。这一战略合作不仅满足合规要求,还推动中国企业数字化转型,构建面向未来的经营基座。
|
JSON 安全 前端开发
如何开发一套EHS健康安全环境管理系统中的危废品管理板块?(附架构图+流程图+代码参考)
危废管理是EHS系统的重要组成部分,涉及企业危险废物的全生命周期管控。若管理不当,可能导致监管处罚、环境安全风险及成本失控。一个高效的危废管理系统应实现入库→存储→出库→处置→档案追溯→看板治理的闭环流程,不仅确保合规,还能降本增效,并在事故发生时快速响应与举证。系统需涵盖危废目录、出入库单、库存管理、处置记录、合规审批、数据看板等核心功能,结合技术架构与数据库设计,支持前后端开发与移动端应用,最终实现可视化、可追溯、自动化管理。
|
设计模式 人工智能 API
Cursor 上线最新 AI 模型 Claude 3.7 Max:200k上下文+200次工具调用!史上最强代码助手硬核上线
Claude 3.7 Max 是 Cursor 推出的最新 AI 模型,支持 200k 上下文窗口和 200 次工具调用,专为复杂代码任务设计,适合硬核开发者和大型项目。
1482 6
Cursor 上线最新 AI 模型 Claude 3.7 Max:200k上下文+200次工具调用!史上最强代码助手硬核上线
|
JavaScript 前端开发 开发者
|
机器学习/深度学习 监控 数据可视化
DeepSeek模型解释与可视化
深度学习模型常被视为“黑盒”,其决策过程难以理解,但在医疗、金融等高风险领域,理解模型决策至关重要。DeepSeek提供多种工具和方法,帮助解释和可视化模型的决策过程。本文介绍如何使用DeepSeek进行特征重要性分析、中间层可视化、局部解释(如LIME和SHAP)及训练过程监控,并通过代码示例详细讲解这些技巧,助力你掌握模型解释与可视化的方法。
|
存储 安全 Java
Spring Security中Token存储与会话管理:解析与实践
Spring Security中Token存储与会话管理:解析与实践
1417 103

热门文章

最新文章