jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: jQueryjQuery .load( Object eventData, Function handler(eventObject) )

描述: 给"load" JavaScript 事件绑定一个事件处理程序。
  • version added: 1.0
  • .load( Function handler(eventObject) )
  • handler(eventObject) 一个函数,当事件触发时执行的函数。
  • version added: 1.4.3
  • .load( Object eventData, Function handler(eventObject) )
  • eventData json数据,传递给事件处理程序的数据。
    handler(eventObject) 一个函数,每次事件触发时执行的函数。

这个方法是.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()方法的注意事项如下:

  • 它一贯不能跨浏览器工作也不可靠
  • 在WebKit下如果图片的src跟前面的一样,它不能正常的触发。
  • 它不能再DOM树种正确冒泡
  • 对于已经在浏览器的缓存里的影像会停止触发

Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.

Examples:

例子:

当页面完全加载包括图片时,执行一个函数。
$(window).load(function () {
  // run code
});

例子:

当每一个图片加载完成后并且高度大于100时添加bigImg样式.
$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('bigImg');
  }
});

Returns: jQueryjQuery .load( String url, Map | String data, Function complete(responseText, textStatus, XMLHttpRequest) )

Description: 从服务端加载数据并将返回的HTML放入匹配的元素中.
  • version added: 1.0
  • .load( String url, Map | String data, Function complete(responseText, textStatus, XMLHttpRequest) )
  • url 一个字符串,包含请求将发送到得URL.
    data 一个json或字符串,用于同请求一起发送到服务端.
    complete(responseText, textStatus, XMLHttpRequest) 一个回调函数,当请求完成时执行的函数.
$('#result').load('ajax/test.html');

如果提供了回调,在加载后执行:

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

在上面的两个例子中,如果当前文档并不包含ID为 "result"的元素,.load()方法不会执行。

如果提供的数据是一个对象,使用POST方法,否则使用GET.

注意: 事件处理也有一个方法名字是 .load(). 使用哪一个取决于传入的参数.

载入页面片段

.load() 方法, 不像 $.get(),允许我们指定远程文件被插入的部分。 他是一个特殊的 url 参数。 一个或多个空格字符被包括在这个 url 参数字符串中, 在这个字符串被第一空格划分jQuery选择内容将被载入.

我们可以修改上述例子中,只有“#container”部分被载人到文件中:

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

当这种方法执行, 它将检索 ajax/test.html 页面的内容,jQuery会获取ID为 container 元素的内容,并且插入到ID为 result 元素,而其他的被检索到的元素将被废弃

jQuery 使用浏览器的 .innerHTML属性来解析取回的文档并将其插入到当前文档。 在这个处理过程中,通常会过滤文档中的元素,如:<html><title>, or <head>元素。 其结果是,通过.load()方法取回的元素可能不完全等同于浏览器取回的文档.

注意: 当调用.load()时,使用无后缀的URL表达式, using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is however called with a selector expression appended to the URL, the scripts are stripped out prior to the DOM being updated, which is why they are never executed. An example of both cases can be seen below:

如下,任何加载到#a中的JavaScript将作为文档的一部分被执行.

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

在这种情况下,被加载到#b中的脚本块执行前被剥离:

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

Examples:

例子:

加载主页的footer导航到一个列表中.
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>body{ font-size: 12px; font-family: Arial; }</style>
</head>
<body>
  
<b>Footer navigation:</b>
<ol id="new-nav"></ol>

  <script>$("#new-nav").load("/ #jq-footerNavigation li");</script>
</body>
</html>

Demo:

例子:

展示一个提示信息当Ajax请求遇到了错误.
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>body{ font-size: 12px; font-family: Arial; }</style>
</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>

Demo:

例子:

加载feeds.html文档到ID为feeds的div中.
$("#feeds").load("feeds.html");

例子:

传递数组数据到服务端.
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

例子:

同上,但将POST参数到服务端并在服务端返回结果后执行一个回调.
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});