document load document ready
时间: 2024-06-09 18:05:56 浏览: 12
在原生的JavaScript中,并没有ready()方法,只有load()方法。load事件是在页面所有资源(包括DOM树、CSS文件、JS文件和图片资源等)加载完成后触发的,而ready事件(在jQuery中才有)是在DOM文档树加载完成后执行一个函数,不包括图片、CSS等资源,所以它的执行速度比load事件快。在jQuery中,可以使用$(document).ready()或$(function())来绑定ready事件。
总结:在原生JavaScript中,只有load事件,用于在页面所有资源加载完成后执行一个函数;而在jQuery中,除了load事件外,还有ready事件,用于在DOM文档树加载完成后执行一个函数。
相关问题
document.load和ready的区别
document.load和ready都是JavaScript中常用的事件处理程序,它们用于在HTML文档完全加载后执行JavaScript代码。不过,它们的实现方式有所不同。
document.load事件表示当页面的所有元素(包括图像、CSS文件、JavaScript文件等)都已经加载完毕时触发。这意味着当页面上的所有内容都完全加载后,才会执行注册在document.load事件上的JavaScript代码。由于页面上的所有内容都必须完全加载才能触发该事件,因此这可能会导致页面加载速度变慢。
相比之下,ready事件则表示当DOM(文档对象模型)准备就绪时触发。这意味着在DOM结构构建完成后就可以执行JavaScript代码。这种方法更快,因为在资源文件完全加载之前就可以开始执行JavaScript代码。
因此,如果您想在页面上的所有内容都完全加载后再执行JavaScript代码,可以使用document.load事件。如果您只关心DOM结构是否准备就绪,可以使用ready事件。在实际应用中,更常用的是ready事件。可以通过jQuery中的$(document).ready()方法来注册ready事件。
$(window).load与$(document).ready的区别
`$(window).load` 和 `$(document).ready` 都是 jQuery 提供的方法,用于在页面加载完成后执行一些 JavaScript 代码。它们的区别在于执行的时机不同。
`$(document).ready` 会在 DOM 加载完成后立即执行,不必等待其他资源的加载完成。这意味着它可以更快地执行 JavaScript 代码。通常情况下,我们使用 `$(document).ready` 来绑定一些事件、修改 DOM 或者执行其他的操作。
`$(window).load` 则会等到所有资源都加载完成后才会执行,包括图片、CSS、JavaScript 等。这意味着它会比 `$(document).ready` 更慢,但是它可以确保所有的资源都已经加载完成,这对于某些操作是必须的。例如,如果你需要获取图片的真实宽度和高度,那么就必须等待图片加载完成后才能进行计算。
总之,`$(document).ready` 更快,适合大多数情况下的操作;而 `$(window).load` 更慢,但是更可靠,适合需要等待所有资源加载完成后才能进行的操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)