jQuery 頁面加載事件

時間 2019-12-01

原文原文鏈接

頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁麪包含圖片等文件在內的全部元素都加載完成。(能夠說：ready 在onload 前加載！！！)
通常樣式控制的，好比圖片大小控制放在onload 裏面加載;

jS事件觸發的方法，能夠在ready 裏面加載;
用jQ的人不少人都是這麼開始寫腳本的：
一般的寫法 javascript

複製代碼代碼以下:

 
$(function(){ 
 
// do something 
 
});

其實這個就是jq ready()的簡寫，他等價於： html

複製代碼代碼以下:

 
$(document).ready(function(){ 
 
//do something 
 
})

也等於下面這個方法，jQuer的默認參數是：「document」； java

複製代碼代碼以下:

 
$().ready(function(){ 
 
//do something 
 
})

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery通常最早學到的是什麼時候啓動事件。在曾經很長一段時間裏,在頁面載入後引起的事件都被加載在」Body」的Onload事件裏.
對於Body的Onload事件和JQuery的Ready方法相比，有不少弊端.好比:
加載多個函數的問題
■<body onload="a();b();">
</body>
在Onload事件中只能這樣加載，很醜陋…
■而在JQuery中你能夠利用多個JQuery.Ready()方法，它們會按次序依次執行
代碼和內容不分離
這個貌似不用說了，讓人深惡痛絕-.-!!◦ 執行前後順序不一樣
■對於Body.Onload事件，是在加載完全部頁面內容纔會觸發，個人意思是全部內容,包括圖片，flash等.若是頁面的這些內容不少會讓用戶等待很長時間.
■ 而對於$(document).ready()方法，這個方法只是在頁面全部的DOM加載完畢後就會觸發,無疑很大的加快了網頁的速度.

可是對於一些特殊應用，好比圖片的放大縮小，圖片的剪裁。須要網頁全部的內容加載完畢後才執行的呢？我推薦使用$(window).load()方法，這個方法會等到頁面全部內容加載完畢後纔會觸發，而且同時又沒有OnLoad事件的弊端. 閉包

複製代碼代碼以下:

 
<script type="text/javascript"> 
 
$(window).load(function() { 
 
alert("hello"); 
 
}); 
 
$(window).load(function() { 
 
alert("hello again"); 
 
}); 
 
</script>

上面的代碼會在頁面全部內容加載完成後按前後順序依次執行.
固然不要忘了與之對應的Unload方法函數

複製代碼代碼以下:

 
<script type="text/javascript"> 
 
$(window).unload(function() { 
 
alert("good bye"); 
 
}); 
 
</script>

上面代碼會在頁面關閉時引起.
在全部DOM加載以前引起JS代碼
這個方法是我在調試的時候最喜歡的，有時候開發的時候也用這種方法 this

複製代碼代碼以下:

 
<body> 
 
<script type="text/javascript"> 
 
(function() { 
 
alert("hi"); 
 
})(jQuery) 
 
</script> 
 
</body>

對，就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執行，固然也能夠直接嵌入js代碼,這種方式要注意順序問題，以下： spa

複製代碼代碼以下:

 
<body> 
 
<div id="test">this is the content</div> 
 
<script type="text/javascript"> 
 
alert($("#test").html());//I Can display the content 
 
</script> 
 
</body> 
 
<body> 
 
<script type="text/javascript"> 
 
alert($("#test").html());//I Can't display the content 
 
</script> 
 
<div id="test">this is the content</div> 
 
</body>

上面兩段代碼, 第二段代碼當中由於只能解釋到當前代碼以前的DOM,而test並不存在於已經解析的DOM數.因此第二段代碼沒法正確顯示.調試