jQuery為啥要提供一個load()方法?

最後更新：2014-07-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style blog http java width io

上午的時候,找個閑暇事件整理之前整理的一些關於jQuery的東西,看到了一個之前做的jQuery的$(document).ready()與window.onload()方法的比較。上面兩個方法最重要的區別在於：$(document).ready()的觸發實際是HTML的這棵DOM樹建建立的時候,就觸發了這個ready()函數的執行，但是windows.onload()方法則是在DOM樹建立之後，並且DOM中帶有URL屬性的元素都被載入到本地之後，才會去執行。

說的簡單一點，就是一個頁面載入分成三個步驟：
1）瀏覽器接收到純文字的HTML
2）HTML根據XHTML的規則，將其解析成為一個DOM樹
3）瀏覽器遍曆DOM中帶有再次請求資訊的節點，例如image，通過這些節點上的資訊，將遠端資源擷取到本地（或者是從cache中擷取）
然後，經過瀏覽器的解析之後，你看到的就是整個頁面了。

其中，$(document).ready()方法的觸發時機是在第二步結束,而window.onload()方法的出發時機則是在第三步結束之後。

聯想到一個問題，如果我需要在document.ready()方法中，擷取映像的大小應該怎麼辦呢？因為ready()方法的觸發時機被人為的提前了，帶來了很多好處，但是也必然存在類似這樣的弊端。jQuery還是考慮到了這樣的情況，並且做了相應的解決方案，在他的文檔裡面，有一個load()方法,就是用來解決這樣的問題。直接把代碼copy上來吧，注意onload方法適用於下面幾個對象：images、frames、scripts、window對象。

<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><script type="text/javascript" src="jquery-1.3.1.js"></script><script type="text/javascript">$(function(){$("#image").load(function(){alert($("#image").width());});})</script></head><body><select multiple="multiple"><option value="1">Oracle</option><option value="2">Java</option><option value="3">C++</option></select><img id="image" src="http://t1.baidu.com/it/u=2624739849,4151443416&fm=32&picname=8441c36b01d987e6ca8054e6d69615f8.jpg"></body></html></span>

這就是jQuery提供了load()方法的主要考慮了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery為啥要提供一個load()方法?

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support