1. 程式人生 > >實現在html頁面載入之前執行js方法

實現在html頁面載入之前執行js方法

瀏覽器對html頁面內容的載入是順序載入,也就是在html頁面中前面先載入,因此當載入到JS指令碼時,JS是一種解釋性的指令碼,也是從上而下順序執行,由於這段JS程式碼是立即執行的。

  • 第一種方式是把方法寫在head中(推薦)

    讓它順序執行的時候去執行。
    
  • 第二種方式是使用body的onload方法

  • 第三種方式是使用$(document).ready()

引用

JQuery 中用得最多的要屬工廠函式 $() 了,下面我們就來看一下它的初步應用。

大家知道,在 JQuery 中我們可以使用 $(document).ready(); 在其中加入頁面載入後的程式碼,以便做出豐富的頁面行為。

它和傳統的 JS 中的 onload 有什麼區別呢?

onload ready 沒有簡寫方式 具有簡寫方式 當 HTML 頁面所有內容載入完畢後才執行 onload 當 DOM
節點載入完畢後就執行 ready 一個 HTML 頁面只能編寫一個 onload 一個 HTML 頁面允許同時編寫多個 ready

傳統的 window 的 onload 程式如下:

window.onload = function() { }

它是在整個頁面完全被載入之後執行。

這樣做最大的一個缺點就是速度問題,onload 中的程式碼不僅是在構建 DOM 樹之後,而且是在所有影象和其它外部資源被完整地載入

並在頁面瀏覽器視窗顯示完畢之後才執行。

而 $(document).ready() 最大地優點就是在瀏覽器構建 DOM 樹之後立即執行其中的程式碼。

(document).ready()(), 你可以在括號中直接加你的匿名函式,如下:

$(function() { });

$(document).ready(function() { });

$().ready(function(){ });

都是正確的。