1. 程式人生 > >頁面載入完後立刻執行JS的兩種方法

頁面載入完後立刻執行JS的兩種方法

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


var userName="xiaoming";


alert(userName);


}
方式二:$(document).ready{ }: 
會在DOM完全就緒並可以使用時呼叫。雖然這也意味著所有元素對指令碼而言都是可以訪問的,但是,並不意味著所有關聯的檔案都已經下載完畢。換句話說,當HMTL下載完成並解析為DOM樹之後,程式碼就會執行。
假設有一個表現相簿的頁面,這種頁面中可能會包含許多大型影象,我們可以通過jQuery隱藏、顯示或以其他方式操作這些影象。如果我們通過onload頁面設定介面,那麼使用者在能夠使用這個頁面之前,必須要等到每一幅影象都下載完成。更糟糕的是,如果行為稍微新增給哪些具有預設行為的元素(比如連結),那麼使用者的互動可能會導致意想不到的結果。然而當我們試用$(document).ready(){ }進行設定時,這個介面就會更早地準備好可用的正確行為。 
使用$(document).ready(){ }一般來說都要優於試用onload事件處理程式,但必須要明確一點的是,因為支援檔案可能還沒有家在完成,所以類似影象的高度和寬度這樣的屬性此時不一定有效。
$(document).ready(function(){ 


var userName="xiaoming";


alert(userName);
});
方式二可簡寫為:
$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});
 

相關推薦

頁面載入立刻執行JS方法

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

頁面載入自動執行一個方法js程式碼

1、在body中用onload: <body onload="myfunction()"> 2、在指令碼中用window.onlo <script type="text/ja

在整個頁面載入執行的操作

在最近做頁面的時候要求將使用者上次的記錄渲染到頁面上....但是所在的文字域偏偏又是最晚才載入進來..... 所以用了 window.onload函式..發現它才是老油條,最後成功解決問題: window.onload=function(){         var te

net(c#)在迴圈語句中執行WebBrowser.Navigate();方法,每次迴圈等待網頁載入繼續執行的解決方案

    最近在寫一個小程式的時候,遇到這樣的需求:           已知一組網頁url地址,想獲取每一個網頁的html,實際上就是想利用迴圈語句裡面使用WebBrowser來載入每一個網頁,然後獲取他們的html,           要實現這個功能,想想應該是件很簡單

tomcat後臺執行方法

  我們使用tomcat 啟動一個新的專案,會出現一個視窗。如果有人需要使用這臺電腦的時候,就很容易關掉tomcat 導致程式停止執行。為避免這種錯誤把tomcat設定為後臺執行。    下面兩種方法實現tomcat 後臺執行; 一、修改tomcat裡面的配置    1.找

asp.net 執行js方法

方法二: <asp:Literal ID="ltScript" runat="server"></asp:Literal> 然後使用Literal類,在後臺程式碼使用時 private void Button1_Click(object sender

執行緒,輪流有序執行方法

要求:兩個執行緒的任務都是列印1到1000的資料,執行緒1列印一次後執行緒2繼續列印,實現輪流列印 方法1:使用interrupt()和sleep()協調使用,一個列印完成後sleep(),並且interrupt另一個執行緒的睡眠,同時讓自己睡眠,迴圈1000次即可 方法

C# 獲取aspx頁面中所有隱藏控制元件的方法

適合.NET4.0 以上版本 /// <summary> /// 獲取ASPX頁面中隱藏post值 Viewstae 等 /// </summary> /// <param name="Url"></para

方法實現在HTML頁面載入完畢執行某個js

Js方法:<script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert(userName); } </script&

在HTML頁面載入完畢執行某個js

在DOM載入完就可以執行(比window.onload更早)。在同一頁面中可以多次出現.ready() 兩者主要區別:Window.onload=function (){}: 當一個文件完全下載到瀏覽器中時,才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操

Vue.js 關於頁面載入完成執行一個方法的問題

首先我們會想著在mounted或者created裡面加入想要執行的方法,但是有的時候會遇到在你執行這個方法的時候,頁面還並沒有被渲染完成,所以就會出現這個方法在匹配頁面標籤報錯的情況。 解決思路: 1.通過子頁面呼叫父頁面的方法,因為在子頁面開始渲染的時候,你的父頁面肯定

頁面載入完成執行JS的5方式

在js和jquery使用中,經常使用到頁面載入完成後執行某一方法。通過整理,大概是五種方式。 1.jQuery的$( function(){} ); 2.jQuery的$(document).rea

HTML頁面載入完畢執行某個js

1、js方法: <script type="text/javascript"> window.onload=function(){ alert("html頁面載入完成後一"); } </script> 2、jQuery方法:(需要引用j

JS頁面載入完畢執行的多種方式和比較

做專案的時候可能會遇到這種情況:   一個頁面的中定義了多個onload事件,那麼在此定義window.onload函式的時候可能會不生效或者多個onload之間覆蓋的現象.   有的朋友肯定會說用jQuery的$$(document).ready(func

JS_實現頁面載入執行JS程式碼

1 在body中用onload: <body onload="myfunction()"> 2 在指令碼中用window.onload: <script type="text/javascript"> function myfun() { alert("this window

js中如何控制所有頁面載入完成,再執行某些方法

做頁面時經常會遇到當前頁面載入完成後,執行某些初始化工作。這時候就要知道如何判斷頁面(包括IFRAME)已經載入完成,程式碼如下: <script language="javascript">       document.onreadystatechange

js頁面載入完成執行的幾方式及執行順序

在js和jquery使用中,經常使用到頁面載入完成後執行某一方法。通過整理,大概是五種方式(其中有的只是書寫方式不一樣)。 1:使用jQuery的$(function){};2:使用jquery的$(document).ready(function(){});前兩者本質上沒

方法實現在HTML頁面加載完畢運行某個js

功能性 下載 事件 兩種 一點 方法 實現 代碼 寬度 js方法: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(user

怎樣判斷js指令碼是否載入,並在載入進行操作

在工作過程中,經常會遇到按需載入的需求,即在指令碼載入完成後,返回一個回撥函式,在回撥函式中進行相關操作,那如何去判斷指令碼是否載入完成了呢? 可以對載入的js物件使用onload來判斷,jsDom.onload // ie6、7不支援js.onload方法,使用js.on

頁面用一個遮罩層顯示載入載入隱藏該div

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "&