参看掘金上的一篇博客：《实现图片懒加载》
参看一个在 jQuery 基础上编写的懒加载封装：《lazyload》
参看一篇博客：《图片懒加载 lazyload.js使用方法》

一、lazyload 库的基本使用

1. 引入库

  1. <script src="resources/js/jquery-1.8.3.min.js"></script>
  2. <script src="resources/js/jquery.lazyload.min.js"></script>

2. 给图片写上四大属性

以下四个属是 img 必须具备的

  1. class
  2. width
  3. height
  4. data-original
  1. <img class="lazy" width="640" height="480" data-original="resources/p_w_picpaths/2.jpg">

3. 调用 lazyload 方法

让 class 为 lazy 的图片变成懒加载，JS 写上如下代码

  1. $('img.lazy').lazyload();

二、lazyload 库的进阶使用

1. 设置临界值

使用方法如下，例子中让图片在距离显示区域200px时提前加载

  1. $('img.lazy').lazyload({
  2.     threshold:200,
  3. });

2. 设置占位符

使用方法如下，替代未进去显示区域的待加载图片

  1. $('img.lazy').lazyload({
  2.     placeholder:'resources/p_w_picpaths/loading.gif'
  3. });

3. 设置事件来触发加载

可以用jQuery事件如click，mouseover，也可以用自定义事件，比如：只有当用户点击的时候才加载图片
默认情况下，是要等到用户向下滚动并且图像出现在显示区域时才触发

  1. $('img.lazy').lazyload({
  2.     event:'click'
  3. });

4…（有空了再来补充）

「@浪里淘沙的小法师」