快捷導(dǎo)航

老生常談document.ready和window.onload

更新時(shí)間：2024年01月03日 15:17:28 作者：前端路上的小兵

這篇文章主要介紹了document.ready和window.onload的相關(guān)知識(shí),包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

1、對(duì)頁面加載的認(rèn)識(shí)

　　一般情況下，一個(gè)頁面的相應(yīng)加載順序是：域名解析——>加載html——>加載js和css——>加載圖片等其他信息。

2、關(guān)于document.ready()

　　執(zhí)行時(shí)機(jī)：在DOM完全就緒時(shí)就可以被調(diào)用。
　　多次使用：在同一個(gè)文件中多次使用，一次調(diào)用。
　　理解：document.ready()的意思是在DOM加載完成之后執(zhí)行ready()方法中的代碼，換句話說，這個(gè)方法的本意是為了讓代碼的執(zhí)行時(shí)間是在DOM加載完成之后才開始執(zhí)行。

/*
  多次使用：運(yùn)行結(jié)果為：先是one,然后是two
*/
function one(){
    alert("one");
}
function two(){
    alert("two");
}
$(document).ready(function(){
    one();
});
$(document).ready(function(){
    two();
});
/*
  寫法
*/
//jq的寫法
$(document).ready(function(){
    //do something
});
//簡(jiǎn)寫，默認(rèn)document
$().ready(function(){
    //do somethin
});
//簡(jiǎn)寫
$(function(){
    //do something
});

3、關(guān)于document.onload()

　　執(zhí)行時(shí)機(jī)：在網(wǎng)頁中所有元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行，即JavaScript此時(shí)可以訪問網(wǎng)頁中的所有元素。
　　多次執(zhí)行：JavaScript的onload事件一次只能保存對(duì)一個(gè)函數(shù)的引用，他會(huì)自動(dòng)調(diào)用最后面的函數(shù)覆蓋前面的函數(shù)。

/*
  多次使用：運(yùn)行結(jié)果為：只執(zhí)行了two
*/
function one(){
    alert("one");
}
function two(){
    alert("two");
}
window.onload = one;
window.onload = two;
/*
  寫法
*/
window.onload = function(){
    //do something
}
//等價(jià)于
$(window).load(function(){
    //do something
})

4、document.ready和window.onload的區(qū)別

　　document.ready和window.onload的區(qū)別——JavaScript文檔加載完成事件。
　　頁面加載完成有兩種事件：
　　　　一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）。
　　　　二是onload，指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。

5、為什么要使用document.ready()或者document.onload()

　　$(document).ready() 里的代碼是在頁面內(nèi)容都加載完才執(zhí)行的，如果把代碼直接寫到script標(biāo)簽里，當(dāng)頁面加載完這個(gè)script標(biāo)簽就會(huì)執(zhí)行里邊的代碼了，此時(shí)如果你標(biāo)簽里執(zhí)行的代碼調(diào)用了當(dāng)前還沒加載過來的代碼或者dom，那么就會(huì)報(bào)錯(cuò)，當(dāng)然如果你把script標(biāo)簽放到頁面最后面那么就沒問題了，此時(shí)和ready效果一樣。

6、document.ready()的使用場(chǎng)景　　

點(diǎn)擊段落，此段落隱藏

<html>
<head>
    <meta charset="utf-8">
    <title>
        test
    </title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p>If you click on me,I will disappear.</p>
</body>
</html>

　　如果把$(document).ready(function(){});去掉后，無法隱藏段落

<html>
<head>
    <meta charset="utf-8">
    <title>
        test
    </title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $("p").click(function () {
            $(this).hide();
        });
    </script>
</head>
<body>
    <p>If you click on me,I will disappear.</p>
</body>
</html>

　　但是把script放到頁面最后的話，就可恢復(fù)隱藏效果

<html>
<head>
    <meta charset="utf-8">
    <title>
        test
    </title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>If you click on me,I will disappear.</p>
    <script>
        $("p").click(function () {
            $(this).hide();
        });
    </script>
</body>
</html>

到此這篇關(guān)于細(xì)說document.ready和window.onload的文章就介紹到這了,更多相關(guān)document.ready和window.onload內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: