真正的LazyLoad按需加载

有些号称延迟加载的插件其实并没有做到按需加载，只是提前将图片下载好，按需展示。这样的话，依然是多并发，只是在浏览体验上好了那么一点。

而经过我的实验，发现jquery.lazyload.js这个插件可以真正的实现按需加载，打开调试模式可以看到，默认情况下图片是不加载的，只有当滚动到底部时才发出加载图片的请求。这样不仅降低并发减少服务器压力，还可以加快页面载入速度获得良好的用户体验。
实现方法也非常简单。

首先引入jquery.js和jquery.lazyload.js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>
// 默认占位符是灰色图片，可以自己替换js里的placeholder为空或者指定的站位图片，也可以在html部分指定src为空

其次，定义图片格式：

<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt="">

调用代码：

<script type="text/javascript">
$(function() {
    $("img.lazy").lazyload({
        threshold : 200, // 设置阀值
        effect : "fadeIn" // 设置图片渐入特效
    });
});
</script>