jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

女爷i 2022-05-29 06:52 1260阅读 0赞

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.  
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

> Demo页面:
> 
> [基本选项][Link 1]
> 
> [淡入效果][Link 2]
> 
> [对不支持JavaScript浏览器的降级处理][JavaScript]
> 
> [水平滚动][Link 3]
> 
> [容器内水平滚动][Link 4]
> 
> [容器内垂直滚动][Link 5]
> 
> [页面内存在N多图片][N]
> 
> [经过五秒钟的延迟后加载图片][Link 6]
> 
> [用AJAX来加载图片][AJAX]

## 如何使用 ##

Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是`</body>`前:

<table style="border-spacing:0px;width:778px;background:none;font-size:1em;border:0px;margin:0px;float:none;height:auto;line-height:1.1em;padding:0px;vertical-align:baseline;font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;table-layout:auto;"> 
 <tbody style="background:none;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px;vertical-align:baseline;width:auto;font-size:1em;"> 
  <tr style="background:none;border-top:0px;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px;vertical-align:baseline;width:auto;font-size:1em;"> 
   <td style="padding:0px;border-width:0px;background:none;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:rgb(175,175,175);"> 
    <div style="background-image:none;border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(67,90,95);float:none;height:auto;line-height:1.1em;margin:0px;padding:0px .5em 0px 1em;text-align:right;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;">
      1 
    </div> 
    <div style="background-image:none;border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(67,90,95);float:none;height:auto;line-height:1.1em;margin:0px;padding:0px .5em 0px 1em;text-align:right;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;">
      2 
    </div></td> 
   <td style="width:744px;padding:0px;border-width:0px;background:none;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;"> 
    <div style="max-width:1200px;padding:0px;margin:0px;width:auto;background:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;font-size:1em;"> 
     <div style="background-image:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;"> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&lt;</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">script</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">type</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"text/javascript"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">src</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"jquery.js"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;&lt;/</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">script</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;</code> 
     </div> 
     <div style="background-image:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;"> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&lt;</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">script</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">type</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"text/javascript"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">src</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"jquery.lazyload.js"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;&lt;/</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">script</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

你必须改变图片的标签。图像的地址必须放在`data-original`属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。代码如下：

这将使所有 class 为 `lazy` 的图片将被延迟加载.  
Demo:[基本选项][Link 1]

TIPS:这里必须设置图片的`width`和`height`,否则插件可能无法正常工作。

## 设置临界点 ##

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置`threshold `选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

## 设置事件来触发加载 ##

你可以使用jQuery事件，例如`click`和`mouseover`。也可以使用自定义事件，如`sporty`、`foobar`默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片：

Demo:[经过五秒钟的延迟后加载图片][Link 6]

## 使用特效 ##

默认情况下，插件等待图像完全加载并调用`show()`。你可以使用任何你想要的效果。下面的代码使用`fadeIn `（淡入效果）。  
Demo:[淡入效果][Link 2]

## 针对不启用JavaScript的情况 ##

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 `<noscript>` 标签内.

<table style="border-spacing:0px;width:778px;background:none;font-size:1em;border:0px;margin:0px;float:none;height:auto;line-height:1.1em;padding:0px;vertical-align:baseline;font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;table-layout:auto;"> 
 <tbody style="background:none;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px;vertical-align:baseline;width:auto;font-size:1em;"> 
  <tr style="background:none;border-top:0px;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px;vertical-align:baseline;width:auto;font-size:1em;"> 
   <td style="padding:0px;border-width:0px;background:none;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:rgb(175,175,175);"> 
    <div style="background-image:none;border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(67,90,95);float:none;height:auto;line-height:1.1em;margin:0px;padding:0px .5em 0px 1em;text-align:right;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;">
      1 
    </div> 
    <div style="background-image:none;border-width:0px 3px 0px 0px;border-right-style:solid;border-right-color:rgb(67,90,95);float:none;height:auto;line-height:1.1em;margin:0px;padding:0px .5em 0px 1em;text-align:right;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;">
      2 
    </div></td> 
   <td style="width:744px;padding:0px;border-width:0px;background:none;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;"> 
    <div style="max-width:1200px;padding:0px;margin:0px;width:auto;background:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;font-size:1em;"> 
     <div style="background-image:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;"> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&lt;</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">img</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">class</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"lazy"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">data-original</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"img/example.jpg"</code>&nbsp; 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">width</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"640"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">heigh</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"480"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;</code> 
     </div> 
     <div style="background-image:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;font-size:1em;white-space:pre;"> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&lt;</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">noscript</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;&lt;</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">img</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">src</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"img/example.jpg"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">width</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"640"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(224,232,255);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">heigh</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">=</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(92,230,56);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">"480"</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;&lt;/</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(91,161,207);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">noscript</code> 
      <code style="font-family:Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;padding:0px;color:rgb(185,189,182);background:none;border:0px;float:none;height:auto;line-height:1.1em;margin:0px;vertical-align:baseline;width:auto;">&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

可以通过 CSS 隐藏占位符.

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

## 图片在容器里面 ##

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.  
Demo:[容器内水平滚动][Link 4], [容器内垂直滚动][Link 5]

## 当图像不连续时 ##

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 `failurelimit` 选项来控制加载行为.

将 failurelimit 设为 10 ，令插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

## 加载隐藏的图片 ##

可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 `skip_invisible` 设为 `false`

## 下载插件 ##

最新版本 [源代码][Link 7]和[压缩代码][Link 8]. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.

AD： 【chrome二维码插件】 [w3cways QR Code Generator][]

本人遇到的问题：

1.必须设置img的高度（如果为了统一，可设置  min-height），如果在容器中，必须固定容器的高度。

2. Dynamic generated image is requested twice when using jquery lazy loading in Google Chrome，在chrome下面动态生成的图片，会被请求两次，这个通过cache解决了

https://stackoverflow.com/questions/14504313/dynamic-generated-image-is-requested-twice-when-using-jquery-lazy-loading-in-goo

3.懒加载的三种实现方式 https://zhuanlan.zhihu.com/p/25455672

4.angularjs 的懒加载https://github.com/Wyntau/me-lazyimg

参考：1.官网 https://appelsiini.net/projects/lazyload/v1/

5.源码解析

http://www.cnblogs.com/yangjunhua/p/3871763.html

6.源码十八问

http://blog.csdn.net/liangklfang/article/details/50447555

[Link 1]: http://www.w3cways.com/demo/LazyLoad/enabled.html
[Link 2]: http://www.w3cways.com/demo/LazyLoad/enabled_fadein.html
[JavaScript]: http://www.w3cways.com/demo/LazyLoad/enabled_noscript.html
[Link 3]: http://www.w3cways.com/demo/LazyLoad/enabled_wide.html
[Link 4]: http://www.w3cways.com/demo/LazyLoad/enabled_wide_container.html
[Link 5]: http://www.w3cways.com/demo/LazyLoad/enabled_container.html
[N]: http://www.w3cways.com/demo/LazyLoad/enabled_gazillion.html
[Link 6]: http://www.w3cways.com/demo/LazyLoad/enabled_timeout.html
[AJAX]: http://www.w3cways.com/demo/LazyLoad/enabled_ajax.html
[Link 7]: https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
[Link 8]: https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
[w3cways QR Code Generator]: https://www.w3cways.com/2127.html