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 树构建完成后执行的代码
});
相关文章
|
6月前
|
JavaScript 前端开发
load、$(document).ready、DOMContentLoaded的区别
load、$(document).ready、DOMContentLoaded的区别
107 3
|
6月前
|
JavaScript 前端开发
document load 和 document ready 的区别
document load 和 document ready 的区别
|
7月前
|
JavaScript 前端开发 API
document 对象
document对象是JavaScript中最重要的对象之一,它表示当前页面的HTML文档。document对象提供了丰富的属性和方法,允许我们访问、操作和修改HTML文档的结构和内容。
63 3
|
7月前
|
JavaScript 前端开发 UED
深入理解 Document Load 和 Document Ready 的区别
深入理解 Document Load 和 Document Ready 的区别
106 0
|
7月前
|
JavaScript 前端开发
$(document).ready()方法和window.onload有什么区别?
$(document).ready()方法和window.onload有什么区别?
51 0
|
存储 移动开发 缓存
Day23 - document以外的常用对象
Day23 - document以外的常用对象
114 0
|
JavaScript API 容器
Uncaught Error: _registerComponent(...): Target container is not a DOM element
Uncaught Error: _registerComponent(...): Target container is not a DOM element var SessionPage = React.
2245 0
|
Web App开发 JavaScript 索引