什么是图片懒加载？

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

实现思路

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

  <div class="container">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
  </div>

• 当图片出现在视野范围内才去加载图片，这里有个关键点，如何去判断图片出现 在了视野中?
  需要以下几个值来判断（假设是以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)
}

最终效果