onload事件与ready的区别

时间 2019-12-05

标签 onload 事件 ready 区别繁體版

原文原文链接

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

参考连接：onload与ready的区别
详见浏览器工做原理：浏览器工做原理css

前言

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

$(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中函数没有重载，因此会实现覆盖jquery

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

<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()能够分离spa

执行前后顺序不一样（最大区别）

$(document).ready()：在DOM结构加载完毕以后执行
window.onload：在全部的文件加载完毕以后执行.net

$(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");
});