• 为什么要用懒加载?

1.1 能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，
用户难免会心生抱怨,这就严重影响用户体验。
1.2 减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
1.3 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

• 懒加载原理

2.1 遍历每张图片，图片到document上边的距离offset().top <=窗口的高度$(window).heght() + 元素滚出去的距$(ducument).scrollTop() 
时进行加载
2.2 以上情况下，添加自定义属性 attr("loaded",1) ,将data-src的值赋值给图片的src
2.3以上封装为函数 ，滚动的情况下调用此函数
2.4trigger()方法自动触发事件

  <ul>
      <li>
          <img src="未加载时固定图片" data-src="真实图片路径" alt="">
      </li>
      <li>
          <img src="未加载时固定图片" data-src="真实图片路径" alt="">
      </li>
      <li>
          <img src="未加载时固定图片" data-src="真实图片路径" alt="">
      </li>
      <li>
          <img src="未加载时固定图片" data-src="真实图片路径" alt="">
      </li>
    </ul>
    
    <script src="./jquery.js"></script>
    <script>
    $(function(){
        function lazyload(){
            $('img').each(function (index, value) {
            
                if($(this).attr('loaded') == '1')return;
      
                if ($(this).offset().top <= $(window).height() + $(document).scrollTop()) {
                    $(this).attr('src',$(this).attr('data-src')).attr('loaded','1');
                }
            })
        }
        $(window).scroll(function(){
            lazyload();
        }).trigger('scroll');
    })
    </script>