onload事件与ready的区别

最新推荐文章于 2022-06-08 22:07:04 发布

weixin_34138521

最新推荐文章于 2022-06-08 22:07:04 发布

阅读量165

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008933191

版权

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

参考链接：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相比

加载多函数问题

<body onload="a();b();">
</body>

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

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

<body onload="a();b()">
</body>
<script>
window.onload = function(){alert('world');}
</script>

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

<body onload="a();b()">
</body>
<srcipt>
function a(){alert('a');}
function b(){alert('b');}
</script>

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用法
<script type='text/javascript'>
function winready(){
    document.getElementByIdx_x.('load').style.display='none';
}
window.onload=winready; //或者window.onload=function(){winready();}
</scritp>
jquery用法:
<script type='text/javascript'>
    $(document).ready(function(){
        $('#load').css('display','none');
    })
</script>

$(window).load()

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

<script type="text/JavaScript">
        $(window).load(function() {
            alert("hello");
        });
        $(window).load(function() {
            alert("hello again");
        });
</script>

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

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