图片的懒加载

我们做一个网站的时候，有时候有很多的资源加载，比如说有大量的图片展示，图片一般情况下会消耗很多的资源，一个页面有上百个图片的展示如果一次从服务器请求过来会导致很慢，不仅如此，这样做也会导致资源的浪费（毕竟用户可能只看一点点内容）并且这样图片展示的话也会很慢，用户的体验也不会特别好，如果我们使用图片懒加载的这个技术，就会大大减少资源的浪费和提高用户的体验
那么问题来了，什么是懒加载？
懒加载是在网上有很多的解释，统一来说就是按需加载
懒加载表现形式：

• 浏览网页的时候拖动滚动条
• 拖动到一个占位图片的视窗
• 占位图片瞬间变成最终的图片
  好了，我们如果要学习懒加载技术，思路是，首先页面中的几十个图片都是同一个图片，我们看到了某个图片，他就变成了需要展示的图片
  按照这个思路，首先，我们什么怎么判定图片被我们看到呢
  图片烂加载.png
  首先我们要获取浏览器的高度(window).scrollTop(),以及图片节点距离页面顶端的高度$(node).offset().top,有了这三个变量我们可以使用公式来判定图片是否被我们看到

$(node).offset().top <= $(window).height() + $(window).scrollTop()

第二步，如何让图片被变成我们的最终图片呢
首先我们定义一个自定义的属性data-src来存储图片的真实地址，如何图片被我们看到了，我们就使用data-src里面的值来替换src的值就达到了我们目标变成最终展示的图片

$(node).attr('src',$(node).attr(data-src))

html代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 500px;
            height: 500px;
        }

        .layout{
            width: 1000px;
            margin: 0 auto;
            font-size: 0px;
        }
    </style>
    <div class="layout">
        <img src="./img/1.jpg" alt="" data-src="./img/1.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/3.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/4.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/5.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/6.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/7.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/8.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/9.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/10.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/11.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/12.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/13.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/14.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/15.jpg">
        <img src="./img/1.jpg" alt="" data-src="./img/16.jpg">
    </div>

jQuery代码

        start()

        $(window).on('scroll',function(){
            start()
        })
        //加载函数
        function start(){
            $('.layout img').each(function(){
                    if( $(this) ){
                    loadImg( $(this) )
                }
            })
        }
        //修改图片地址函数
        function loadImg($img){
            $img.attr('src',$img.attr('data-src'))
        }
        //是否显示函数
        function isShow($node){
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
        }

当然，为了让代码更健壮，我们可以考虑加入判断元素，如果Img已经进行了加载了，那就不要让他在继续修改src的值了，我们修改一下isShow()和start()这两个函数

function start(){
  //根据data-isLoaded属性来判断是否给这个对象添加加载事件
$('.layout img').not('[data-isLoad]').each(function(){
       if( $(this) ){
                    loadImg( $(this) )
         }
  })
}

  function loadImg($img){
      $img.attr('src', $img.attr('data-src'))
     //加载过后就添加 data-isLoaded属性
      $img.attr('data-isLoaded',1)
  }

这样就算是一个比较合格的懒加载布局了