使用jQuery实现图片懒加载

概念

图片的懒加载是前端性能优化中的重要一环，通过图片或者数据的延迟加载，可以让第一次打开进入页面速度更快更流畅，用户体验蹭蹭蹭提高

原理

进入页面时，图片的src地址为空不显示，真实图片地址放在img的自定义属性上，向上滚动时实时计算图片盒子距离视口的位置，当达到需要显示区域时，就替换图片的真实src地址，这样图片就显示出来了

处理方案

把所有需要延迟加载的图片用一个盒子包裹起来，设置宽高和默认占位图

下面就使用jQuery来实现图片的懒加载功能

画图解析：

代码实现：

<div class="imgBox">
    <img src="" alt="" data-img='./img/(1).jpg'>
</div>

<script>
  let $imgBox = $('.imgBox'),
      $img = $imgBox.children('img'),
      $window = $(window)

  $window.on('load scroll',function(){
    // jq支持多个事件同时绑定
    // 这个回调函数 会在页面加载完毕后执行 和 页面滚动条滚动的时候执行
    // 在这里实时计算图片位置关系
    if($img.attr('isLoad') === 'true') {
      // 判断图片是否加载过,如果加载过，则无需重复加载
      return;
    }

    let $A = $imgBox.outerHeight() + $imgBox.offset().top,
    // 图片盒子高度 + 图片盒子距离body长度
        $B = $window.outerHeight() + $window.scrollTop()
    // 可视区高度 + 滚动条卷曲高度

    if($A <= $B) {
      $img.attr('src',$img.attr('data-img')) // 替换真实图片地址
      $img.on('load',function(){
        // 图片加载成功 显示
        $img.css('display','block')
      })
      $img.attr('isLoad','true') // 防止图片反复加载
    }
  })
</script>

效果预览

以上就是图片懒加载的原理及实现，实际项目中页面里有多张图片改如何处理呢？

代码实现

<div class="container">

</div>

<script>
  let $container = $('.container'),
      $imgBoxs = null,
      $window = $(window),
      str = ``

  new Array(20).fill(null).forEach((item,index)=>{
    str += `<div class="imgBox">
      <img src="" alt="" data-img='./img/(${index+1}).jpg'>
    </div>`
  })
  $container.html(str)
  $imgBoxs = $container.children('.imgBox') //每一张图片盒子

  // 多张图片延迟加载
  $window.on('load scroll',function(){
    let $B = $window.outerHeight() + $window.scrollTop()
    // 循环每一张图片盒子,来判断距离body的距离,是否需要加载显示
    $imgBoxs.each((index,item)=>{
      let $item = $(item),
          $itemA = $item.outerHeight() + $item.offset().top,
          isLoad = $item.attr('isLoad');

      if($itemA <= $B && isLoad !== 'true') {
        $item.attr('isLoad','true') // 防止图片反复加载
        let $itemImg = $item.children('img')
        $itemImg.attr('src',$itemImg.attr('data-img')) // 替换真实图片地址
        $itemImg.on('load',function(){
          // 图片加载成功 显示
          $itemImg.css('display','inline-block')
        })
      }
    })
  })
</script>

效果预览