$(window).load和$(document).ready之间有什么区别？

Question

我最近遇到了一个问题,我的JavaScript代码并将我的部分代码从我的代码中解决$(document).ready()并$(window).load()解决了问题.

现在我明白之后会window.load被解雇document.ready,但为什么之后没有准备就绪document.ready,那之后window.load()呢？

Answer 1

load在所有资产加载完成后调用,包括图像.ready在DOM准备好进行交互时触发.

从MDC,window.onload:

load文件在文档加载过程结束时触发.此时,文档中的所有对象都在DOM中,并且所有图像和子帧都已完成加载.

从jQuery API文档,.ready(处理程序):

虽然JavaScript提供了在呈现页面时执行代码的加载事件,但在完全接收到所有资产(如图像)之前,不会触发此事件.在大多数情况下,只要完全构造DOM层次结构,就可以运行脚本.传递给.ready()的处理程序保证在DOM准备好后执行,因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置.使用依赖于CSS样式属性值的脚本时,在引用脚本之前引用外部样式表或嵌入样式元素很重要.

Answer 2

$(document).ready() 表示您的页面的DOM已准备好进行操作.

window.load() 当整个页面(包括CSS和图像文件等组件)已完全加载时触发.

你想要实现什么目标？

Answer 3

$(document).ready(function(){
//code here
});

几乎每次我们工作时都会使用上面的代码jQuery.

当我们想要jQuery在DOM准备好之后初始化代码时使用此代码.

$(window).load()

有时你想操纵图片.例如,您想要垂直和水平对齐图片,您需要获取图片的宽度和高度才能执行此操作.随着$(document).ready()你将不能够这样做,如果游客不具有已加载的图像,在这种情况下,你需要初始化jquery当图像完成加载对准功能.这就是我们使用的地方$(window).load()

Answer 4

$(document).ready是jQuery加载DOM时触发的事件,因此在文档结构准备好时触发它.

$(window).load 在加载完整内容(包括css,图像等)之后触发事件.

这是主要的区别.