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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。