document load 和 document ready 的区别

news/2024/11/7 6:34:30/

"document load" 和 "document ready" 都是 JavaScript 中用于处理文档加载事件的术语,但是它们之间有一些重要的区别。

document load

在传统的 JavaScript 中,document.load 事件是当整个 HTML 文档完全加载并出现在浏览器中时触发的。这意味着在此事件发生之前,可能有一些元素还未完全加载,比如图片、外部脚本、样式表等。因此,如果你在 document.load 事件处理器中尝试访问这些元素,可能会出现找不到的情况。

document ready

相比之下,document.ready(或者 jQuery 中的 $(document).ready())事件是在 HTML 文档被完全加载和解析,并且所有依赖的样式表和图像都已完全加载之后才触发的。这意味着在此事件发生之后,所有在文档中的元素都可以被安全地访问。

在实际编程中,我们通常更倾向于使用 "document ready",因为它能确保当我们尝试访问页面上的元素时,这些元素已经存在并可用。

代码示例

这是一个简单的示例,展示了如何使用这两种事件:

// 使用 document.load 事件
document.load = function() {
var img = document.getElementById('myImage');
console.log(img.src); // 如果图片还未加载,这里可能会出错
}// 使用 document.ready 事件(jQuery 示例)
$(document).ready(function() {
var img = $('#myImage')[0];
console.log(img.src); // 确保图片已经加载,所以这里不会出错
});

请注意,在这个例子中,如果在 document.load 事件发生时图片还未加载,那么尝试获取图片的 src 属性将会失败,因为那时图片元素还不存在。然而,在 document.ready(或 jQuery 中的 $(document).ready())事件发生时,图片已经被加载,因此可以安全地获取其 src 属性。


http://www.ppmy.cn/news/1241555.html

相关文章

css加载会造成阻塞吗??

前言 前几天面试问到了这个问题,当时这个答得不敢确定哈哈,虽然一面还是过了 现在再分析下这个,总结下,等下次遇到就能自信得回答,666 准备工作 为了完成本次测试,先来科普一下,如何利用chr…

面试笔记--Linux常用命令

文件和目录操作: ls: 列出目录内容 例子:ls -l - 列出详细信息,包括权限、所有者等 cd: 切换目录 例子:cd Documents - 进入 “Documents” 目录 pwd: 显示当前工作目录 例子:pwd - 显示当前工作目录的路径 cp: 复制文…

排序算法-----基数排序

目录 前言 基数排序 算法思想 ​编辑 算法示例 代码实现 1.队列queue.h 头文件 2.队列queue.c 源文件 3.主函数(radix_sort实现) 算法分析 前言 今天我想把前面未更新完的排序算法补充一下,也就是基数排序的一种,这是跟…

Windows系统管理之备份与恢复

本章目录: 一. 本章须知: 前置条件 需要创建一个新的磁盘 前置条件2 给新添加的磁盘分盘 二. 了解开启并学会使用Windows sever backup 如何使用备份与恢复“备份计划”“一次性备份”“恢复” 最后是用命令行“一次性备份命令 ”完成一次备份 话不多说 …

LeetCode [简单] 160. 相交链表

给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 题目数据 保证 整个链式结构中不存在环。 注意,函数返回结果后,链表必须 保持其原始结构 。 160.…

kolla-ansible 部署OpenStack云计算平台

目录 一、环境 二、安装及部署 三、测试 一、环境 官方文档:https://docs.openstack.org/kolla-ansible/yoga/user/quickstart.html rhel8.6 网络设置: 修改网卡名称 网络IP: 主机名: 网络时间协议 配置软件仓库 vim docke…

机器人规划算法——movebase导航框架源码分析

这里对MoveBase类的类成员进行了声明,以下为比较重要的几个类成员函数。 构造函数 MoveBase::MoveBase | 初始化Action 控制主体 MoveBase::executeCb收到目标,触发全局规划线程,循环执行局部规划 全局规划线程 void MoveBase::planThread |…

ubuntu22.04 安装 jupyterlab

JupyterLab Install JupyterLab with pip: pip install jupyterlabNote: If you install JupyterLab with conda or mamba, we recommend using the conda-forge channel. Once installed, launch JupyterLab with: jupyter lab