返回值:jQueryload(handler(eventObject))

为 JavaScript 的 "load" 事件绑定一个处理函数。

该方法是 .bind('load', handler) 的快捷方式。

load 事件在一个元素及它的所有子元素都被加载完成后执行。该事件同样适用于任何可使用 URL 的元素，例如：images, scripts, frames, iframes, 和 window 对象。

例如，在一个页面上含有一个简单的图片：

<img src="book.png" alt="Book" id="book" />

该事件可绑定在这个图片上：

$('#book').load(function() {
  // Handler for .load() called.
});

一旦图片被加载完，该事件就会被触发。

一般来说,没有必要去等待所有的图片被完全加载完。如果代码可以及早被执行，将它放在一个函数内传给 .ready() 方法，通常是最好的做法。

Ajax 模块同样也有一个叫 .load() 的方法。但哪一个会被执行，取决于传递的参数设置。

load 事件和图片对象一起使用时的注意事项

开发者们在试图使用 .load() 事件来解决一个共通的挑战，那就是：当一张图片（或一组图片）被完全加载完之后，执行一个函数。以下是一些相关的注意事项：

  • 该事件不会始终被触发（要看图片是否被浏览器缓存），也不能可靠的跨浏览器。
  • 如果新设置的图片路径(即 src 属性)和之前的一样，那么在 WebKit 下，该事件无法被正确触发。
  • 该事件无法正确的在 DOM 树中向上冒泡。
  • 对于已经被浏览器缓存的图片，该事件不会被触发。

注意: .live() 和 .delegate() 方法无法检测在 iframe 中的 load 事件。.load() 事件无法正确的向父文档冒泡。同时，在 Firefox, IE9 和 Chrome 中，event.target 也无法被设置，因为它需要事件委托。

示例:

当页面（包括所有图片）被完全加载完后，执行一个函数。

jQuery 代码:
$(window).load(function () {
  // run code
});

示例:

在图片对象的 load 事件中，做如下处理：如果图片高度大于 100，就给它添加 bigImg 样式。

jQuery 代码:
$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('bigImg');
  }
});

返回值:jQueryload(url, [data], [complete(responseText, textStatus, XMLHttpRequest)])

从服务器加载数据，并将返回的 HTML 结果放到匹配的元素中。

注意: 在事件处理模块中，也有一个叫 .load() 的方法。但哪一个会被执行，取决于传递的参数设置。

该方法是从服务器获取数据的最简单方式。它基本上等同于 $.get(url, data, success)，只不过它是一个方法，而不是全局函数，并且它有一个隐式的回调函数。当检测到请求被成功返回时（比如，textStatus 等于 "success" 或 "notmodified"），.load() 会将返回的结果赋给匹配的元素。通常会像下面这样，很方便的使用该方法： 

$('#result').load('ajax/test.html');

回调函数

如果提供了 "complete" 回调函数，它将在函数处理完之后，并且 HTML 已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次，并且 this 始终指向当前正在处理的 DOM 元素。 

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

上面两个例子中，如果当前文档中不存在 ID 是 "result" 的元素的话，是不会执行 .load() 方法的。

请求方式

如果提供的 data 参数是一个对象的话，那么请求时会使用 POST 方式,否则就使用 GET 方式。

加载页面片断

.load() 方法, 不像 $.get() 那样，允许我们使用在 url 中添加特定参数的特殊语法，来实现可以指定要插入哪一部分远程文档。如果 url 参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是 jQuery 的选择器，从而决定应该加载返回结果中的哪部分内容。

我们可以修改上面的例子，只加载部分返回结果：

$('#result').load('ajax/test.html #container');

当上面的方法执行时，它首先会返回 ajax/test.html 的所有内容，然后 jQuery 解析返回的文档内容，找到 ID 是 container 的元素。该元素及其内容会被插入到 ID 是 result 元素中，而其余的返回结果会被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析返回的文档，并将它插入到当前文档中。在这个过程中，浏览器经常会从文档中过滤掉一些元素，例如： <html>, <title>, 和 <head> 等。最后的结果是，通过 .load() 方法返回的元素可能与从浏览器中直接获取到的文档内容不同。

脚本的执行

当调用 .load() 方法时，如果 url 参数中没有选择器表达式后缀的话，那么传递给 .html() 的返回内容中，是含有脚本的。在它们被丢弃之前，脚本是会被执行的。但如果调用 .load() 时，即使在 url 参数中添加了选择器表达式，但在 DOM 被更新之前，脚本会被删除。因此脚本不会被执行。下面的例子分别演示了这两种情况：

下面的例子中,任何加载到 #a 中的 JavaScript 脚本，将会作为文档的一部分而被执行。 

$('#a').load('article.html');

然而，下面的例子中，加载到 #b 中的脚本在执行之前就已经被删除了: 

$('#b').load('article.html #target');

补充说明:

  • 由于浏览器的安全限制，大多数 "Ajax" 请求都服从 同源策略(same origin policy)。即无法从不同的域，子域或协议中正确接收数据。

示例:

在一个有序列表中，加载主页的页脚导航。

<!DOCTYPE html>
<html>
<head>
<style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
<script src="jquery.min.js"></script>
</head>
<body>


<b>Footer navigation:</b>
<ol id="new-nav"></ol>


<script>


  $("#new-nav").load("/ #jq-footerNavigation li");


</script>
</body>
</html>

演示:

示例:

如果 Ajax 请求遇到问题，就显示一个提示。

<!DOCTYPE html>
<html>
<head>
<style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>


<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
  

<script>


$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  

</script>
</body>
</html>

演示:

示例:

在 ID 是 feeds 的 div 中，加载 feeds.html 的文件内容。

jQuery 代码:
$("#feeds").load("feeds.html");
结果:
<div id="feeds"><b>45</b> feeds found.</div>

示例:

将一组数据传给服务器。

jQuery 代码:
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

示例:

和上例一样，使用 POST 方式将附加的参数传给服务器。不同的是，当服务器返回结果时，调用一个回调函数。

jQuery 代码:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});