uTools-Manuals/docs/jQuery/load-event.html
2019-04-21 11:50:48 +08:00

141 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.load()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/events/">事件</a> &gt; <a href="/category/events/document-loading/">文档加载</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/deprecated/">弃用</a> &gt; <a href="/category/deprecated/deprecated-1.8/">1.8 版本弃用的 API</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/removed/">已删除的函数</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/load-event/" target="_blank">.load()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="load1"><h2 class="section-title">
<span class="name">.load( handler(eventObject) )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span><span class="version-details">version deprecated: <a href="/category/version/1.8/">1.8</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>为 JavaScript 的 "load" 事件绑定一个处理函数。</p>
<ul class="signatures">
<li class="signature" id="load-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.load( handler(eventObject) )</h4>
<ul><li>
<div><strong>handler(eventObject)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>每次事件触发时会执行的函数。</div>
</li></ul>
</li>
<li class="signature" id="load-eventData-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.load( [eventData ], handler(eventObject) )</h4>
<ul>
<li>
<div><strong>eventData</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个对象,它包含的数据键值对映射将被传递给事件处理程序。</div>
</li>
<li>
<div><strong>handler(eventObject)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>每次事件触发时会执行的函数。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>这个方法是 <code>.bind('load', handler)</code> 的快捷方式。</p>
<p>当所有子元素已经被完全加载完成时,<code>load</code>事件被发送到这个元素。此事件适用于任何可使用 URL关联的任何元素images, scripts, frames, iframes, <code>window</code> 对象。</p>
<p>例子,考虑了一个简单的图片页面:</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"book.png"</span> <span class="attribute">alt</span>=<span class="value">"Book"</span> <span class="attribute">id</span>=<span class="value">"book"</span> /&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>事件处理器可以绑定到图像上:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#book'</span>).load(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Handler for .load() called.</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>只要图像已被加载,该处理程序被调用。</p>
<p>在一般情况下,没有必要等待所有图像完全装入。如果代码可以更早的执行,通常最好把它在发送到<code>.ready()</code>方法处理。</p>
<div class="warning"><p>Ajax的模块也有一个方法命名<a href="/load"><code>.load()</code></a> 。jQuery根据传递给它的参数设置来确定使用哪个方法执行。</p></div>
<div class="warning">
<p>
<b>当使用图像上的<code>load</code>事件时的注意事项</b>
</p>
<p>开发者们在试图使用 <code>.load()</code> 事件来解决一个共通的挑战,那就是:当一张图片(或一组图片)被完全加载完之后,执行一个函数。以下是一些相关的注意事项:</p>
<ul>
<li>它在跨浏览器下始终是不可靠</li>
<li>如果被设置图片的src和之前的src相同在WebKit中该事件不能正常触发</li>
<li>不能正常的在DOM树上冒泡</li>
<li>如果图片已经在浏览器的缓存中,将停止触发</li>
</ul>
</div>
<div class="warning">
<p><strong>注意:</strong><code>.live()</code><code>.delegate()</code>方法不能用于检测一个iframe的<code>load</code>事件。load事件不能正常泡沫到父文档,并且在Firefox,IE9和Chrome浏览器中event.target无法被设置因为它需要事件代理。</p>
</div>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">当页面(包括所有图片)被完全加载完后,执行一个函数。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(window).load(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// run code</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">在图片对象的 load 事件中,做如下处理:如果图片高度大于 100就给它添加 bigImg 样式。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'img.userIcon'</span>).load(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span>($(<span class="keyword">this</span>).height() &gt; <span class="number">100</span>) {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).addClass(<span class="string">'bigImg'</span>);</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>