Mikel
[转载]jquery实现图片延时加载 – Smile城 – 博客园.
原理：通过 JQuery 插件 lazyload 使得在浏览器可见区域外的图片不会被加载，当图片被用户滚动到浏览器可见区域时图片才进行加载，有点类似使用 Google 搜索图片时的效果。很明显，通过使用图片延时加载可以提高页面的加载速度。
实现过程：
首先是引入JQuery文件和插件文件。jQuery文件在这里我就不再赘述了。下面我贴出插件文件，我们将该文件命名为jQuery.lazyload.js
<span class="com">// JavaScript Document</span><span class="pln"></span><span class="com">/** Lazy Load - jQuery plugin for lazy loading images** Copyright (c) 2007-2012 Mika Tuupola** Licensed under the MIT license:** Project home:** Version: 1.8.0**/</span><span class="pln"></span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$</span><span class="pun">,</span><span class="pln"> window</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> $window </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">window</span><span class="pun">);</span><span class="pln">$</span><span class="pun">.</span><span class="pln">fn</span><span class="pun">.</span><span class="pln">lazyload </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> elements </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">;</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> $container</span><span class="pun">;</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> settings </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln">failure_limit </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"></span><span class="kwd">event</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"scroll"</span><span class="pun">,</span><span class="pln">effect </span><span class="pun">:</span><span class="pln"> </span><span class="str">"show"</span><span class="pun">,</span><span class="pln">container </span><span class="pun">:</span><span class="pln"> window</span><span class="pun">,</span><span class="pln">data_attribute </span><span class="pun">:</span><span class="pln"> </span><span class="str">"original"</span><span class="pun">,</span><span class="pln">skip_invisible </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">appear </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">load </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"></span><span class="pun">};</span><span class="pln"></span><span class="kwd">function</span><span class="pln"> update</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> counter </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">elements</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> $this </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">skip_invisible </span><span class="pun">&</span><span class="pln">amp</span><span class="pun">;&</span><span class="pln">amp</span><span class="pun">;</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$this</span><span class="pun">.</span><span class="kwd">is</span><span class="pun">(</span><span class="str">":visible"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">return</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">abovethetop</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">||</span><span class="pln">$</span><span class="pun">.</span><span class="pln">leftofbegin</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="com">/* Nothing. */</span><span class="pln"></span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">belowthefold</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&</span><span class="pln">amp</span><span class="pun">;&</span><span class="pln">amp</span><span class="pun">;</span><span class="pln"></span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">rightoffold</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$this</span><span class="pun">.</span><span class="pln">trigger</span><span class="pun">(</span><span class="str">"appear"</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(++</span><span class="pln">counter </span><span class="pun">&</span><span class="pln">gt</span><span class="pun">;</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">failure_limit</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">if</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="com">/* Maintain BC for a couple of versions. */</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">failurelimit</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">options</span><span class="pun">.</span><span class="pln">failure_limit </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">failurelimit</span><span class="pun">;</span><span class="pln"></span><span class="kwd">delete</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">failurelimit</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">effectspeed</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">options</span><span class="pun">.</span><span class="pln">effect_speed </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">effectspeed</span><span class="pun">;</span><span class="pln"></span><span class="kwd">delete</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">effectspeed</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln">$</span><span class="pun">.</span><span class="pln">extend</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="com">/* Cache container as jQuery as object. */</span><span class="pln">$container </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">||</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> window</span><span class="pun">)</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> $window </span><span class="pun">:</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container</span><span class="pun">);</span><span class="pln"></span><span class="com">/* Fire one scroll event per scroll. Not one scroll event per image. */</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="lit">0</span><span class="pln"> </span><span class="pun">===</span><span class="pln"> settings</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="str">"scroll"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$container</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> update</span><span class="pun">();</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">this</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> </span><span class="kwd">self</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">;</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> $self </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">self</span><span class="pun">);</span><span class="pln"></span><span class="kwd">self</span><span class="pun">.</span><span class="pln">loaded </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"></span><span class="com">/* When appear is triggered load original image. */</span><span class="pln">$self</span><span class="pun">.</span><span class="pln">one</span><span class="pun">(</span><span class="str">"appear"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">loaded</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">appear</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> elements_left </span><span class="pun">=</span><span class="pln"> elements</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">appear</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="kwd">self</span><span class="pun">,</span><span class="pln"> elements_left</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span><span class="pln">$</span><span class="pun">(</span><span class="str">"<img alt="" />"</span><span class="pun">)</span><span class="pln"></span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">"load"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$self</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">()</span><span class="pln"></span><span class="pun">.</span><span class="pln">attr</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> $self</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">data_attribute</span><span class="pun">))</span><span class="pln"></span><span class="pun">[</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">effect</span><span class="pun">](</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">effect_speed</span><span class="pun">);</span><span class="pln"></span><span class="kwd">self</span><span class="pun">.</span><span class="pln">loaded </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"></span><span class="com">/* Remove image from array so it is not looped next time. */</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> temp </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">grep</span><span class="pun">(</span><span class="pln">elements</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">element</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">element</span><span class="pun">.</span><span class="pln">loaded</span><span class="pun">;</span><span class="pln"></span><span class="pun">});</span><span class="pln">elements </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">temp</span><span class="pun">);</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">load</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> elements_left </span><span class="pun">=</span><span class="pln"> elements</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">load</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="kwd">self</span><span class="pun">,</span><span class="pln"> elements_left</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">})</span><span class="pln"></span><span class="pun">.</span><span class="pln">attr</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> $self</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">data_attribute</span><span class="pun">));</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="com">/* When wanted event is triggered load original image */</span><span class="pln"></span><span class="com">/* by triggering appear. */</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="lit">0</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> settings</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="str">"scroll"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$self</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="kwd">self</span><span class="pun">.</span><span class="pln">loaded</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$self</span><span class="pun">.</span><span class="pln">trigger</span><span class="pun">(</span><span class="str">"appear"</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="com">/* Check if something appears when window is resized. */</span><span class="pln">$window</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">"resize"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">update</span><span class="pun">();</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="com">/* Force initial check if images should appear. */</span><span class="pln">update</span><span class="pun">();</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">;</span><span class="pln"></span><span class="pun">};</span><span class="pln"></span><span class="com">/* Convenience methods in jQuery namespace. */</span><span class="pln"></span><span class="com">/* Use as $.belowthefold(element, {threshold : 100, container : window}) */</span><span class="pln">$</span><span class="pun">.</span><span class="pln">belowthefold </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> fold</span><span class="pun">;</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> window</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">fold </span><span class="pun">=</span><span class="pln"> $window</span><span class="pun">.</span><span class="pln">height</span><span class="pun">()</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> $window</span><span class="pun">.</span><span class="pln">scrollTop</span><span class="pun">();</span><span class="pln"></span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">fold </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">top </span><span class="pun">+</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container</span><span class="pun">).</span><span class="pln">height</span><span class="pun">();</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> fold</span><span class="pun">};</span><span class="pln">$</span><span class="pun">.</span><span class="pln">rightoffold </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> fold</span><span class="pun">;</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> window</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">fold </span><span class="pun">=</span><span class="pln"> $window</span><span class="pun">.</span><span class="pln">width</span><span class="pun">()</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> $window</span><span class="pun">.</span><span class="pln">scrollLeft</span><span class="pun">();</span><span class="pln"></span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">fold </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">left </span><span class="pun">+</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container</span><span class="pun">).</span><span class="pln">width</span><span class="pun">();</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> fold </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">element</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">top </span><span class="pun">+</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">threshold </span><span class="pun">+</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">element</span><span class="pun">).</span><span class="pln">height</span><span class="pun">();</span><span class="pln"></span><span class="pun">};</span><span class="pln">$</span><span class="pun">.</span><span class="pln">leftofbegin </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> fold</span><span class="pun">;</span><span class="pln"></span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">container </span><span class="pun">===</span><span class="pln"> window</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">fold </span><span class="pun">=</span><span class="pln"> $window</span><span class="pun">.</span><span class="pln">scrollLeft</span><span class="pun">();</span><span class="pln"></span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">fold </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">.</span><span class="pln">container</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">left</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> fold </span><span class="pun">&</span><span class="pln">gt</span><span class="pun">;=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">element</span><span class="pun">).</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">left </span><span class="pun">+</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">threshold </span><span class="pun">+</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">element</span><span class="pun">).</span><span class="pln">width</span><span class="pun">();</span><span class="pln"></span><span class="pun">};</span><span class="pln">$</span><span class="pun">.</span><span class="pln">inviewport </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">rightofscreen</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&</span><span class="pln">amp</span><span class="pun">;&</span><span class="pln">amp</span><span class="pun">;</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">leftofscreen</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&</span><span class="pln">amp</span><span class="pun">;&</span><span class="pln">amp</span><span class="pun">;</span><span class="pln"></span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">belowthefold</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&</span><span class="pln">amp</span><span class="pun">;&</span><span class="pln">amp</span><span class="pun">;</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">abovethetop</span><span class="pun">(</span><span class="pln">element</span><span class="pun">,</span><span class="pln"> settings</span><span class="pun">);</span><span class="pln"></span><span class="pun">};</span><span class="pln"></span><span class="com">/* Custom selectors for your convenience. */</span><span class="pln"></span><span class="com">/* Use as $("img:below-the-fold").something() */</span><span class="pln">$</span><span class="pun">.</span><span class="pln">extend</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">expr</span><span class="pun">[</span><span class="str">':'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="str">"below-the-fold"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">belowthefold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="str">"above-the-top"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">belowthefold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="str">"right-of-screen"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">rightoffold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="str">"left-of-screen"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">rightoffold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="str">"in-viewport"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">inviewport</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="com">/* Maintain BC for couple of versions. */</span><span class="pln"></span><span class="str">"above-the-fold"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">belowthefold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="str">"right-of-fold"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">rightoffold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">},</span><span class="pln"></span><span class="str">"left-of-fold"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">!</span><span class="pln">$</span><span class="pun">.</span><span class="pln">rightoffold</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">threshold </span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">});</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="pun">})(</span><span class="pln">jQuery</span><span class="pun">,</span><span class="pln"> window</span><span class="pun">);</span> |
下面我们来看引入方式。
你必须改变你的HTML代码。将SRC属性的占位符图像。演示页面使用1×1像素的灰度GIF 的真实图像的URL必须投入原始数据的属性。
下面我们来看在html代码中需要书写些什么，这是调用方式
<span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="com">// <![CDATA[</span><span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"img"</span><span class="pun">).</span><span class="pln">lazyload</span><span class="pun">({</span><span class="pln"> effect</span><span class="pun">:</span><span class="pln"> </span><span class="str">"fadeIn"</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">});</span><span class="pln"></span><span class="com">// ]]></span><span class="tag"></script></span> |
到这里，其实已经实现了我们想要的效果了，图片将会以 fadeIn 形式被载入。
但是，我们在这里还是不得不提一下，这个插件的其他的功能。
1.可以设置阀值来控制 灵敏度，下边代码把阀值设置成200 表明当图片没有看到之前先load 200像素。
1 $("img").lazyload({ threshold : 200 });
2.可以通过设置占位符图片和自定事件来触发加载图片事件
1 $("img").lazyload({ 2 placeholder: "img/grey.gif", event: "click" 3 });
3.事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouSEOver. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
1 $("img").lazyload({ 2 placeholder: "img/grey.gif", event: "click" 3 });
延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
<span class="pln">$</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$</span><span class="pun">(</span><span class="str">"img:below-the-fold"</span><span class="pun">).</span><span class="pln">lazyload</span><span class="pun">({</span><span class="pln">placeholder</span><span class="pun">:</span><span class="pln"> </span><span class="str">"img/grey.gif"</span><span class="pun">,</span><span class="pln"></span><span class="kwd">event</span><span class="pun">:</span><span class="pln"> </span><span class="str">"sporty"</span><span class="pln"></span><span class="pun">});</span><span class="pln"></span><span class="pun">});</span><span class="pln">$</span><span class="pun">(</span><span class="pln">window</span><span class="pun">).</span><span class="pln">bind</span><span class="pun">(</span><span class="str">"load"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> timeout </span><span class="pun">=</span><span class="pln"> setTimeout</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$</span><span class="pun">(</span><span class="str">"img"</span><span class="pun">).</span><span class="pln">trigger</span><span class="pun">(</span><span class="str">"sporty"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">5000</span><span class="pun">);</span><span class="pln"></span><span class="pun">});</span> |
更多的方法和资料，请参见官网http://www.appelsiini.net/projects/lazyload。
这里需要特别说明一下，jquery的版本不要太低哦，1.3的就不会出效果的。
这是我写的一个小demo，拿去参考一下还是极好的。
下载地址：http://files.cnblogs.com/wscdzl/demo.rar
