Html文檔加載完成后執行js代碼的方法


【轉載,原文地址:http://www.jb51.net/article/51140.htm

兩種方式

第一種:

<script type="text/javascript"> 

window.onload=function(){ 

var userName="xxx"; 

alert(userName); 


</script> 

第二種:

<script type="text/javascript"> 
$(document).ready(
function(){

var txt="xxx";

alert(txt);

});

</script>

簡化后的第二種:

$(function(){ 
var txt="xxx"; 
alert(txt); 
}); 

當dom加載完就可以執行(比window.onload更早)。在同一個頁面里可以多次出現.ready() 

PS:兩者的主要區別 

window.onload: 

當一個文檔完全下載到瀏覽器中時,才會觸發window.onload事件。這意味着頁面上的全部元素對js而言都是可以操作的,也就是說頁面上的所有元素加載完畢才會執行。這種情況對編寫功能性代碼非常有利,因為無需考慮加載的次序。

$(document).ready{ }: 

會在DOM完全就緒並可以使用時調用。雖然這也意味着所有元素對腳本而言都是可以訪問的,但是,並不意味着所有關聯的文件都已經下載完畢。換句話說,當HMTL下載完成並解析為DOM樹之后,代碼就會執行。 

舉一個例子: 

假設有一個表現圖庫的頁面,這種頁面中可能會包含許多大型圖像,我們可以通過jQuery隱藏、顯示或以其他方式操作這些圖像。如果我們通過onload頁面設置界面,那么用戶在能夠使用這個頁面之前,必須要等到每一幅圖像都下載完成。更糟糕的是,如果行為稍微添加給哪些具有默認行為的元素(比如鏈接),那么用戶的交互可能會導致意想不到的結果。然而當我們試用$(document).ready(){ }進行設置時,這個界面就會更早地准備好可用的正確行為。 

使用$(document).ready(){ }一般來說都要優於試用onload事件處理程序,但必須要明確一點的是,因為支持文件可能還沒有加載完成,所以類似圖像的高度和寬度這樣的屬性此時不一定有效。 

注:用把js放在頁面底部的方法以及運用defer="defer" 的方法都是會出現問題的。最好使用上面的函數!

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2021 CODEPRJ.COM