一、懒加载即懒的不想加载无用的东西,只加载界面可视区域的内容;


二、代码部分:

    

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>懒加载实例----步浪博客</title>
        <style type="text/css">
            img{
                width: 600px;
                height: 260px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
        <div>
            <img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
        </div>
    </body>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bl.lazyload.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        lazyload.init({
            anim:true,//开启动画
            selectorName:".samLazyImg",//懒加载盒子
            animtime:200//动画时间
        });
    </script>
</html>

三、bl.lazyload.js部分:

    

/*
   * selectorName,要懒加载的选择器名称
   * extend_height  扩展高度
   * anim  是否开启动画
   * realSrcAtr  图片真正地址
   * anim  动画时间*/
var lazyload = {
  init : function(opt){
    var that = this,
    op = {
        anim: true,
        extend_height:0,
        selectorName:"img",
        realSrcAtr:"dataimg",
        animtime:300
    };
    $.extend(op,opt);
    that.img.init(op);
  },
  img : {
    init : function(n){
      var that = this,
      selectorName = n.selectorName,
      realSrcAtr = n.realSrcAtr,
      anim = n.anim,
      animtime = n.animtime;
      // 判断要加载的图片是不是在指定窗口内
      function inViewport( el ) {
        // 当前窗口的顶部
        var top = window.pageYOffset,
        // 当前窗口的底部
       btm = window.pageYOffset + window.innerHeight,
        // 元素所在整体页面内的y轴位置
       elTop = $(el).offset().top;
        // 判断元素,是否在当前窗口,或者当前窗口延伸400像素内
        return elTop >= top && elTop - n.extend_height <= btm;
      }
      // 滚动事件里判断,加载图片
       $(window).on('scroll', function() {
          $(selectorName).each(function(index,node) {
            var $this = $(this);
            if(!$this.attr(realSrcAtr) || !inViewport(this)){
              return;
            }
            act($this);
          })
        }).trigger('scroll');
       // 展示图片
       function act(_self){
           // 已经加载过了,则中断后续代码
           if (_self.attr('lazyImgLoaded')) return;
            var img = new Image(), 
            original = _self.attr('dataimg');
            // 图片请求完成后的事件,把dataimg指定的图片,放到src里面,浏览器显示
            img.onload = function() {
                _self.attr('src', original);
                anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, animtime);
            };
            // 当你设置img.src的时候,浏览器就在发送图片请求了
            original && (img.src = original);
             _self.attr('lazyImgLoaded', true);
       }
    }
  }
};


四、完整项目获取方法:

    1、关注微信公众号“策码扬编”;

     2、发送关键字“懒加载”;


官方公众号