基于seajs版本重新实现。

注意

目前只实现了window scroll

1. 速度是相对的，取决于用户的感受，显得很快比真的很快更快；
2. 占位图片和最终实际图片大小完全一致；
3. 图片顺序加载（动态调整优先级，类似一个堆栈，出栈会清空所有相同key的元素）；
4. iOS和Android滑动事件的区别（Scroll事件在iOS7中滚动过程中不触发，iOS8中会触发，iOS6-未测试，为减少代码复杂性，不解决此问题，直接使用Scroll事件做监听）；
5. 对待不固定尺寸的图片用背景图的形式替代img标签，以避免CSS width、height等属性设置对占位空间的影响(CSS中img标签的height: auto按图片实际宽高比计算，跟设置的width和height属性无关)。

第一种情况，img显示的最终尺寸与width和height属性所标记的尺寸不一致。

<div role="img" class="lazyload-img" style="width: 图片宽度px;">
    <div style="padding: 图片高宽百分比% 0 0 0;">
        <img data-lazyload-original="图片路径" data-lazyload-state="interactive|loading|complete|error" />
    </div>
</div>

.lazyload-img {
    display: inline-block;
    max-width: 100%;
}

.lazyload-img > div {
    position: relative;
    display: block;
    width: 100%;
    background: #999 url(./images/placeholder.png) no-repeat center center;
}

.lazyload-img > div > img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    will-change: transform;
    /* 下面会适当加快图片的渲染，但由于手机浏览器渲染问题，会导致重复渲染（不请求）
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    */
}

.ie7 .lazyload-img > div > img {
    height: auto;
}

第二种情况，img显示的尺寸是固定的，比如已经通过CSS样式确定

<img data-lazyload-original="真实图片地址" data-lazyload-state="interactive|loading|complete|error" />

也可以使用背景图的方式代替第一种情况，初步测试解决比img形式要高，但存在下述问题。

1. 在移动端和IE9+等同时支持max-width和background-size的浏览器中表现符合预期；
2. 在只支持max-width属性的IE7,8等浏览器中，背景图在实际width大于max-width的情况下，图片居中显示，边缘超出隐藏；
3. 两个属性都不支持的浏览器IE6中，当背景图在实际width大于max-width的情况下，图片占位和显示区域大于容器（暂时无解，从性能优化的角度，不建议出现这种情况）;
4. 在不需要显示区域自适应父级元素空间的终端中，针对上述问题2、3，使用img更合适；
5. 也可保证图片尺寸和显示空间大小完全匹配，则可避免问题2、3（这两个问题本来就违反性能优化原则）。
6. 图片不能下载