关于懒加载原理

• 为何要用懒加载?

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>