图片懒加载

什么是图片懒加载？

在图片非常多的应用场景，为了提高页面加载速度，改善用户体验，对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。

实现思路

• 将所有img的src设置成同一张图片（比如一张显示loading中的图片）,这样一开始只需要加载一张，网络请求只走一次。或者不加载图片，显示白屏也可以。具体看需要。
• 图片的真实地址存放在其他地方，比如一个数组上。为了方便，为每个img自定义一个的data-src(自己随便命名)的属性，存放图片的真实地址

• 当图片出现在视野范围内才去加载图片，这里有个关键点，如何去判断图片出现 在了视野中?
  需要以下几个值来判断（假设是以window为容器进行滚动的）
  ①窗口高度（如果所有图片都在一个容器(div)中，那么需要获取到容器的高度）：$(window).height()
  ②滚动的距离：$(window).scrollTop()
  ③元素在平面内相对于顶点的距离：$node.offset().top
  从下面的图片中可见，当offset().top <= scrollTop() + height()时，div元素才能展示在窗口
  
  

  图片实例

LazyLoad()//一开始没有触发scroll事件，所以需要先去加载一波
$(window).on('scroll', function(){
  LazyLoad()
})
function LazyLoad(){
    $('.container img').each(function(){
    if( isShow($(this)) ){
      loadImg($(this))
    }
  })
}
function isShow($node){
  return $node.offset().top <= $(window).scrollTop() + $(window).height()//如果在一个div内滚动的话，$(window)需要换成对应的div
}
function loadImg($img){
  $img.attr('src', $img.attr('data-src'))
}

• 对于懒加载的图片过几秒显示可以设置如下的定时器，但是这样是华而不实的，不推荐这样做。正常就是追求图片能够快速加载

function LazyLoad(){
  $('.container img').each(function(){
    var $node = $(this)//闭包解决this在回调函数中最终不是想得到的值
    if( isShow($node) ){
      setTimeout(function(){
        loadImg($node)
      }, 500)
    }
  })
}

懒加载的优化

(1)函数节流：scroll事件中，每次滚动停下500ms后再去判断图片是否出现在视窗中，是否需要去加载。滚动事件中的代码改成如下

$(window).on('scroll', function(){
  clearTimeout(timer)
  timer = setTimeout(function(){
    LazyLoad()
  }, 500)
})

(2)每次滚动事件中去除掉已经加载完成的图片，以减少遍历的次数

①加载过的图片加上自定义的isLoaded的属性。
②下次的each遍历中过滤掉这些已经加载过的图片

var timer

LazyLoad()//一开始没有出发scroll事件，所以需要先去加载一波
$(window).on('scroll', function(){
  clearTimeout(timer)
  timer = setTimeout(function(){
    LazyLoad()
  }, 500)
})
function LazyLoad(){
  $('.container img').not('[data-isLoaded]').each(function(){
    var $node = $(this)
    if( isShow($node) ){
        loadImg($node)
    }
  })
}

function isShow($node){
   return $node.offset().top <= $(window).scrollTop() + $(window).height()//如果在一个div内滚动的话，$(window)需要换成对应的div
}
function loadImg($img){
  $img.attr('src', $img.attr('data-src'))
  $img.attr('data-isLoaded', true)
}

最终效果