jQuery為啥要提供一個load()方法?，jqueryload
上午的時候,找個閑暇事件整理之前整理的一些關於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>
這是由於 load 載入時並不是同步的，是非同步。在你點擊執行 load 時，在load非同步處理還沒完成時，當然，就是調出了原來 #show 的內容了，當你第二次當點擊時，原來第一次點擊的 load非同步已經完成了，DOM內容已經改了，這時顯示的，就是load的內容了。
你應該加個回呼函數，來判斷是否已經載入完成了。
$("#show").load("DaiMaTiShi.asp",function(){
alert($("#show").text());
});
這樣的意思是，當 DaiMaTiShi.asp 頁面內容 load 完成後，執行 function，即 alert #show 的內容了
你好，問頁面jquery load 另一帶jquery的頁面的問題，有什好的解決辦法？
是這樣的，如果不過濾掉一些內容的話，直接載入，會使頁面混亂的，比如新的頁面也存在<body>標籤，載入進來後，一個頁面就會存在兩個<body>標籤是不規範的的HTML。這個是在jquery.load()函數中規定的。一般載入進來的頁面需要自己根據載入的內容的元素重新定義CSS樣式和添加js事件的。比如：
原頁面A.html：
<html>
<head><title></title></head>
<body>
<div id="container"></div>
</body></html>
被load的頁面B.html：
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:blue}</style>
<body>
<div id="page">
<ol class="page-li">
<li>234123</li><li>341234</li><li>41234</li><li>412de34</li>
</ol>
</div>
</body></html>
在原頁面A.html中載入調用的jquery.load()，然後再在原頁面對 page-li 的樣式重新定義下就可以了：
添加了load(),css的原頁面：
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:green}</style>
<body>
<div id="container"></div>
<script type="text/javascript">
$(function(){
$("#container").load("B.html #page",null,function(){alert("載入成功")});
});
</script>
</body></html>
希望對你有協助
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
