js中頁面加載完成後執行的幾種方式及執行順序

時間 2019-11-08

標籤頁面加載完成執行幾種方式順序欄目 JavaScript 简体版

原文原文鏈接

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

1：使用jQuery的$(function){};java

2：使用jquery的$(document).ready(function(){});前二者本質上沒有區別，第1種是第2種的簡寫方式。兩個是document加載完成後就執行方法。jquery

3：使用jQuery的$(window).load(function(){});dom

4:使用window.onload = function(){} 第3種和第4種都是等到整個window加載完成執行方法體。二者也沒有區別，只是一個使用dom對象，一個使用jQuery對象。對象

5：在標籤上靜態綁定onload事件，<body onload="aaa()">等待body加載完成，就會執行aaa()方法。事件

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

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

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

使用3：jQuery的$(window).load(function(){});方法

　　　　4:window.onload = function bbb(){}這兩種方式，老是優先於<body onload="aaa()">執行。他們二者執行順序也是根據誰在上方誰先執行。

使用5：<body onload="aaa()">老是最後執行。