如何实现图片懒加载

不知道前端的小伙伴 们，有没有遇到过一个这样的问题，一个网页中有很多的图片，而首屏出现的图片大概就一两张，然而服务器都是先把所有的图片加载出来，再呈现所有的页面，这样就导致页面一时半会加载不出来，影响阅读量！

思路：将页面里所有img标签中的src属性用data-xx代替，当页面滚动到直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src

示例：使用lazyload.js插件

下载地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

  var $window = $(window);

    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,//预加载，参数为距离可视区域范围内提前加载
            failure_limit   : 0,//lazyload按照瀑布流加载图片，当找到（按照图片在DOM中的位置从上往下）第一张不在可视范围的图片后就停止检测延迟加载图片的位置
            event           : "scroll",//事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
            effect          : "show",//渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
            container       : window,//实现效果的容器
            data_attribute  : "original",//图片延迟加载的图片地址属性后缀
            skip_invisible  : true,//用于显示隐藏的图片
            appear          : null,//用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画
            load            : null,//用于图片加载完毕之后执行的函数
            placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
            //用于显示图片之前的图片占位符，需要知道图片有宽度和高度
        };

这是对于lazyload插件的使用方法，部分代码含义我已注释，其中html文件需要改变img标签内容

 <img class="J-content-img lazyload"  data-original="images/2/天门山索道.jpg" />

js代码要导入，并且执行这个函数

 $("img.lazyload").lazyload({effect: "fadeIn"});  

这样，就给了网页图片加载的缓冲时期了，之前我在博客上看到还有一种方法也可以实现，即ajax方法，有兴趣的也可以去看看！！
图片演示地址： http://h5.sztoda.cn/test/testLazyLoad