onload事件与ready的区别

mating 发布于2019-08-20 15:33 / 1990人阅读

摘要：好久没写文章了，再来一波，首先上图参考链接与的区别详见浏览器工作原理浏览器工作原理前言页面加载完成有两种事件一是，表示文档结构结构已经加载完成不包含图片等非文字媒体文件，二是，指示页面包含图片等文件在内的所有元素都加载完成。

好久没写文章了，再来一波，首先上图：

参考链接：onload与ready的区别
详见浏览器工作原理：浏览器工作原理

前言

页面加载完成有两种事件：
一是ready，表示文档结构（DOM结构）已经加载完成（不包含图片等非文字媒体文件），
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)
我的理解：一般样式控制的，比如图片大小控制放在onload 里面加载;而：jS事件触发的方法，可以在ready 里面加载;

$(function(){
// do something
});
其实这个就是jq ready()的简写，他等价于：
 
$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})

body的onload事件与$(document).ready相比 加载多函数问题

原生javascript中函数没有重载，所以会实现覆盖

a)body中声明的onload事件（DOM0级别）会被后面的window.onlad()（DOM0级别）覆盖

b)只能在body中的onload中实现多函数执行




function a(){alert("a");}
function b(){alert("b");}

c)多个window.load()会覆盖（如a）实例）

window.onload = function(){alert("hello");}
window.onload = function(){alert("world");}

在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行

代码和内容分离问题

body中的onload不分离
而window.onload()分离以及$(document),ready()可以分离

执行先后顺序不同（最大区别）

$(document).ready()：在DOM结构加载完毕之后执行
window.onload：在所有的文件加载完毕之后执行

$(document).ready():最大的区别是DOM加载完毕之后，不必再去等图片（异步）加载完毕后执行js代码

window.onload用法

$(window).load()

使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.
以下内容会在页面所有内容加载完成后按先后顺序依次执行.

与之对应的unload事件（会在页面关闭时候执行）

$(window).unload(function() {
            alert("good bye");
});

混合云 idc机房托管 onload事件空间与域名的区别接口与类的区别云服务与云盘的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82333.html

document.ready和window.onload的区别

摘要：和的区别文档加载完成事件页面加载完成有两种事件一是，表示文档结构已经加载完成不包含图片等非文字媒体文件二是，指示页面包含图片等文件在内的所有元素都加载完成。即当所有链接被鼠标单击的时候，都执行也就是说页面加载时绑定，真正该触发时触发。 document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件：一是ready，表示文档结构已经加载完...

B0B0 2019-08-23 14:14 评论0 收藏0
前端知识普及之页面加载

摘要：如果你的文件涉及操作，可以直接在里面添加回调函数，或者说基本上我们的文件都可以写在里面进行调用其实，这和我们将文件放在底部，在上面加以及异步加载文件的效果是一样一样的。如果大家想继续看下面的内容的话，有一个要求，就是回答我一个问题:你这样写过代码吗？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 评论0 收藏0
理解浏览器是如何加载及渲染网页的

摘要：的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。先上图，我们再慢慢解释，这图就是浏览器加载网页的一个过程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 当我们在浏览器输入一个地址...

kevin 2019-08-21 11:36 评论0 收藏0
理解浏览器是如何加载及渲染网页的

摘要：的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。先上图，我们再慢慢解释，这图就是浏览器加载网页的一个过程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 当我们在浏览器输入一个地址...

Worktile 2019-08-05 10:55 评论0 收藏0
理解浏览器是如何加载及渲染网页的

摘要：的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。先上图，我们再慢慢解释，这图就是浏览器加载网页的一个过程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 当我们在浏览器输入一个地址...

xietao3 2019-08-30 15:53 评论0 收藏0