document load 和 document ready 有什么区别

简介: document load 和 document ready 有什么区别

document loaddocument ready 是两个不同的事件,用于监听页面加载完成的时机。它们在不同的情况下触发

  1. document loadload 事件在整个页面及其所有资源(如图片、样式表等)完全加载后触发。这包括页面中的所有内容和依赖文件的下载和渲染。当 load 事件触发时,页面上的所有元素都已经可访问和操作。
$(window).on('load', function() {
    // 页面中所有资源加载完成后执行的代码
});
  1. document readyready 事件(也称为 DOMContentLoaded)在 DOM 树构建完成并且页面的初始 HTML 文档被完全解析和加载后触发。这意味着 DOM 元素已经可以进行访问,但是某些外部资源(如图片)可能还没有加载完毕。通常情况下,ready 事件比 load 事件更早触发,因为它不需要等待所有资源的下载和渲染。
$(document).on('ready', function() {
    // DOM 树构建完成后执行的代码
});

总结来说,document load 事件表示页面的所有资源都已经加载完成,包括 DOM 元素以及所有的外部资源。而 document ready 事件则表示 DOM 树已经构建完成,可以对 DOM 元素进行操作,但是不一定所有外部资源都已经加载完成。

在实际应用中,如果你需要执行与 DOM 相关的操作,通常可以使用 document ready 事件。如果你需要确保页面上的所有资源都已经加载完毕,包括图片、样式表等,那么可以使用 document load 事件。

需要注意的是,如果你使用 jQuery,它提供了简化的方法来监听 document ready 事件:$(document).ready(function() { /* Your code here */ }); 或者 $(function() { /* Your code here */ });

$(function() {
    // DOM 树构建完成后执行的代码
});
相关文章
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
安全 关系型数据库 MySQL
揭秘MySQL海量数据迁移终极秘籍:从逻辑备份到物理复制,解锁大数据迁移的高效与安全之道
【8月更文挑战第2天】MySQL数据量很大的数据库迁移最优方案
1349 17
Vue3日期选择器(DatePicker)
该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装,简化了日常使用。除范围和年选择器外,其他日期选择均返回格式化的字符串。提供了多种自定义设置,如日期选择器宽度、模式、格式等,并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性,并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件,包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。
2007 2
Vue3日期选择器(DatePicker)
|
12月前
|
开发工具 git Windows
IDEA如何对比不同分支某个文件的差异
【9月更文挑战第28天】该指南介绍了在IDEA中使用Git工具窗口进行分支对比的方法。首先,通过底部工具栏或菜单打开Git窗口;接着,在“Branches”选项卡中查看所有分支;然后选择要对比的分支和文件,并通过右键菜单启动对比;最后,在“Diff”视图中查看详细差异,包括新增和删除内容的颜色标记。此外,还提供了使用内置终端执行`git diff`命令进行对比的可选方法。
2039 4
|
JavaScript 前端开发 UED
深入理解 Document Load 和 Document Ready 的区别
深入理解 Document Load 和 Document Ready 的区别
180 0
|
Java 开发工具 Maven
java解析apk获取应用信息
请注意,你需要替换"path/to/your/apkfile.apk"为你的APK文件的实际路径。
510 0
|
存储 资源调度 JavaScript
PyMuPDF 1.24.4 中文文档(八)(1)
PyMuPDF 1.24.4 中文文档(八)
516 0
PyMuPDF 1.24.4 中文文档(八)(1)
|
监控 数据库连接 PHP
利用Laravel-Admin从头撸一个CRM
本教程聚焦于使用Laravel 5.6+和Laravel-Admin构建CRM系统。你将学习CRM基础、模块及权限管理。核心模块包括联系人(潜在客户、机会、客户和关闭阶段)、任务、文档、邮件/消息、用户、角色&权限和日历。准备工作涉及创建新的Laravel项目,安装Laravel-Admin,配置数据库并运行安装命令。后续章节将介绍数据库设计和模型创建。
|
IDE Java 测试技术
Springboot单元测试步骤
Springboot单元测试步骤
288 0
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
4220 0