【javascript】onload load ready的那些事

  首先明確一下頁面加載的步驟:jquery

  一、下載解析HTML文檔結構瀏覽器

  二、加載外部腳本文件與樣式表文件緩存

  三、解析並執行腳本代碼服務器

  四、構造HTML DOM模型框架

  5 、加載圖片等外部文件函數

  六、頁面加載完畢  佈局


  接下來,咱們分別介紹一下三者:性能

  load()方法:url

    load()方法總共有兩種,分別是 jquery的load()方法和jquery Ajax的load()方法。spa

    如何區別兩個方法在於參數的不一樣。

    jQuery:

      當指定的元素(及子元素)已加載時,會發生 load() 事件。

      該事件適用於任何帶有 URL 的元素(好比圖像、腳本、框架、內聯框架)。

      根據不一樣的瀏覽器(Firefox 和 IE),若是圖像已被緩存,則也許不會觸發 load 事件。

      語法:

        $(selector).load(function)

    jQuery Ajax:

      經過 AJAX 請求從服務器加載數據,並把返回的數據放置到指定的元素中。

      語法:

        load(url,data,function(response,status,xhr))

    load事件必須等到網頁中全部內容所有加載完畢以後才被執行。即上述的第六步完成後再運行函數。若是一個網頁中有大量的圖片的話,則就會出現這種狀況:網頁文檔已經呈現出來,但因爲網頁數據尚未徹底加載完畢,致使load事件不可以即時被觸發。因此當咱們要加載一個特別大的圖片時,若是沒有在圖片標籤就限制了圖片的大小,而是在load內設置圖片大小,就會形成圖片先把頁面撐開,等到圖片所有加載完畢後再改變其大小的問題。這樣以來,用戶體驗就會很是的差。

  ready()方法:

    ready()方法在上述第4步完成後運行,即DOM結構繪製完成以後就繪執行。這樣能確保就算有大量的媒體文件沒加載出來,JS代碼同樣能夠執行。

    語法:

      $(document).ready(function)

      $().ready(function)

      $(function)

    上面三種寫法效果是同樣的,後兩種寫法是第一種寫法的簡寫方式。

    因而,上述特別大圖片的加載狀況最好就是把圖片的設置放到ready()方法中來,這樣等到開始加載圖片時,就已經給圖片設置了大小,這樣就不會形成圖片把頁面撐開而破壞頁面佈局的狀況發生了。

  onload()事件:

    前二者爲jQuery的方法,而onload()是js的一個事件,就如同onclick()事件同樣。

    onload 事件會在頁面或圖像加載完成後當即發生。

    語法:

      onload="SomeJavascriptCode"


  這樣就能夠看出來三者的區別了,load()和ready()是jQuery的方法,onload()是js的一個事件。

  若是文檔中沒有相關聯的圖片等媒體文件的話,使用load()和使用ready()性能上沒有多大的區別,不過若是存在,則使用ready()會避免不少麻煩。

  還有load()方法只有一個起做用,即當你運行多個load()方法時,只有最後一個起做用,而ready()方法則能夠同時運行多個,這也是ready()方法相對於load()方法的優點之處。

  因此在須要使用這一方法時,儘可能使用ready()方法。

  至於onload()事件,則如同onclick()、onmouseover()等事件同樣,使用方法也沒有區別。這就是onload()和load()的區別,看起來彷佛同樣,不過倒是徹底不一樣的二者。

相關文章
相關標籤/搜索