js頁面加載完畢函數

時間 2019-12-22

標籤頁面加載完畢函數欄目 JavaScript 简体版

原文原文鏈接

在js和jquery使用中，常用到頁面加載完成後執行某一方法。經過整理，大概是五種書寫方式javascript

使用jQuery的$(function(){});
使用jquery的$(document).ready(function(){});
使用jQuery的$(window).load(function(){});
使用window.onload = function(){};
在標籤上靜態綁定onload事件，<body onload="aaa()">等待body加載完成，就會執行aaa()方法。

第1種和第2種本質上沒有區別，第1種是第2種的簡寫方式。兩個是document加載完成後就執行方法。html

第3種和第4種都是等到整個window加載完成執行方法體。二者也沒有區別，只是一個使用dom對象，一個使用jQuery對象。java

那麼，這五種方式，執行的前後順序是怎麼樣的呢？jquery

經過下方代碼驗證發現：dom

使用1和2不管位置放置在哪裏，老是優先其他三種方式（緣由是：這兩種方式是在document加載完成後就執行，後三種是等到整個window頁面加載完成後才執行），這二者之間的執行順序是誰在上方誰優先執行。函數

使用5：<body onload="aaa()">在1,2以後執行。測試

使用3和4這兩種方式。他們二者執行順序也是根據誰在上方誰先執行。spa

而且函數5和函數4有衝突，二者只有一個可以執行.net

詳情請看window.onload和<body onload="">的關係code

這兩個onload事件只能執行一個
在程序中設置一個onload的事件時：

a. 只設置body onload屬性中能夠響應事件

b. 只設置window.onload函數中也能夠響應事件,這是由於這兩個都是body內容體加載結束執行的
在程序中設置兩個onload的事件時
a. window.onload在head頭部中出現的狀況)只執行body onload屬性的內容

b. window.onload出如今body onload屬性的後面的狀況.等加載完body的頁面,再執行onload事件,後面onload事件是能夠覆蓋前面的onload事件的.

測試代碼

<html>
<head>
    <title>頁面加載完畢的執行順序</title>
    <script src="./js/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
        //按照執行順序寫的頁面加載完畢
        $(function () {
            alert("1.jquery的document加載完畢，簡寫")
        });
        $(document).ready(function () {
            alert("2.jquery的document加載完畢，不簡寫");
        });
        $(window).load(function () {
            alert("3.jquery   window加載完畢");
        });
        window.onload = function () {
            alert("4.html自帶方式  window加載完畢");
        };
        function after() {
            alert("寫了我window.onload函數就不執行了");
        }
    </script>
</head>
<body onload="after()">

</body>
</html>

相關標籤/搜索

每日一句

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