首頁 > web前端 > js教程 > 兩種方法實作在HTML頁面載入完畢後執行某個js

兩種方法實作在HTML頁面載入完畢後執行某個js

不言
發布: 2018-05-07 16:08:25
原創
2228 人瀏覽過

這篇文章主要介紹了透過兩種方法實作在HTML頁面載入完畢後運行某個js,需要的朋友可以參考下

js方法:

複製程式碼 程式碼如下:

<script type="text/javascript"> 
window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>
登入後複製

以下為jQuery方法,需要引用jQuery檔。

複製程式碼 程式碼如下:

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>
登入後複製

或其簡寫

複製程式碼 程式碼如下:

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});
登入後複製

當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" 的方法都是會出現問題的。最好使用上面的函數!


#

以上是兩種方法實作在HTML頁面載入完畢後執行某個js的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板