全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
【热门话题】
首页 > 就业前景 > Web前端 > > document.ready事件和document.load事件的区别
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

document.ready事件和document.load事件的区别

发布时间:4 周 前 栏目:Web前端 浏览:

1、document.ready事件和document.load事件的区别

1、概念

document.ready:

是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);

document.load:

是onload,指示页面包含图片等文件在内的所有元素都加载完成。

2、作用

document.ready:

在DOM加载完成后就可以可以对DOM进行操作。

一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

document.load:

在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

3、加载顺序

document.ready:

文档加载的顺序:域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。

只要标签加载完成,不用等该图片加载完成,就可以设置图片的属性或样式等。

在原生JavaScript中没有Dom ready的直接方法。

document.load:

文档加载的顺序:域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。

DOM load在加载图片等非文字媒体文件之后,表示在document文档加载完成后才可以对DOM进行操作,document文档包括了加载图片等非文字媒体文件。

例如,需要等该图片加载完成,才可以设置图片的属性或样式等。

在原生JavaScript中使用onload事件。

$(document).ready()和传统的方法 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载。

而$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行,所以,使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

document.ready事件和document.load事件的区别

2、javascript ready和load事件的区别

根据ready()方法的API说明

这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.

即当DOM加载完毕的时候,执行这个指定的方法.

因为只有document的状态ready之后,对page的操作才是安全的.

$(document).ready()仅在DOM准备好的时候执行一次.

与之相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候.

$(window).load(function(){…})会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.

而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.

如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行

注意:ready()方法多次调用,传入的handler方法会串联执行(追加).

而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

document.ready事件和document.load事件的区别

3、jquery用load可以正常执行ready却不行

$(window).load(function(){

$(".slidesjs-navigation").wrapAll("");

$(\'#slides-c\').append($(\'#slidesjs-log\'));

$(\'#slidesinfo\').append($(\'#slides-c\'));

$(\'#slides-c\').css("display","inline");

$(\'.slidesfakeinfo\').css("display","none");

$(\'#slidesjs-log\').css("display","inline");

$(\'.slidesjs-navigation\').css("display","inline");

});

这一段代码如果将load改为ready便不能正常执行了。

实际网页在http://hepianpian.com/dw/206/

上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号