lazy-load

懒加载简单说就是按需求加载图片
比如通过一个请求获取图片信息，这时候直接获取好多数据加载到页面上，这往往不是我们需要的，我们可以去实现一个需求，等图片位置出现在屏幕视野后 再去加载，不用直接加载全部内容
这样做的好处：缓解浏览器的压力，节省流量

实现原理：
<img src="" alt="" > 我们知道，只需要在 src 中填入图片地址，就可以加载一张图片。实现懒加载，我们可以自定义一个虚拟的 src，我们可以给它 命名为 data-src。这时我们可以按需求，把 data-src 中图片的真实地址 放到 src 中，就可以实现图片的按需求加载

实现懒加载
已经出现在视野中的图片，也需要滚动后才加载

$(window).on('scroll', function(){  
  $('.container img').each(function(){
    var $node = $(this)  // 给 setTimeout() 用
    if( isShow($(this)) ) {  // 这里可以是 $(this)，也可以是 $node，这时两者还是相同的
      setTimeout(function(){  // 这里的延迟方便看效果，而且介绍了 this 的使用
        loadImg($node)  // 不能用 $(this)，因为这时候$(this) 表示 setTimeout 
      }, 500)
    }
  })
})

function isShow($node){  // 判断元素是否出现在视野中
  return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

function loadImg($img){  // 把暂存在 data-src 中的真实图片地址，传送到 src 中，加载图片
  $img.attr('src', $img.attr('data-src'))
}

优化，初始图片加载
已经出现在视野中的图片，直接加载，后续的图片再通过滚动事件判断是否出现在视野中后，再加载

$(window).on('scroll', function(){  
  $('.container img').each(function(){
    var $node = $(this)  // 给 setTimeout() 用
    if( isShow($(this)) ) {  // 这里可以是 $(this)，也可以是 $node，这时两者还是相同的
      setTimeout(function(){  // 这里的延迟方便看效果，而且介绍了 this 的使用
        loadImg($node)  // 不能用 $(this)，因为这时候$(this) 表示 setTimeout
      }, 500)
    }
  })
})

function isShow($node){  //判断元素是否出现在视野中
  return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

function loadImg($img){  //把暂存在 data-src 中的真实图片地址，传送到 src 中，加载图片
  $img.attr('src', $img.attr('data-src'))
}

优化，实现函数节流
每执行一次 start() 就判断一次图片是否出现在视野中，判断有些已经出现在视野中的图片太浪费了，如何忽略掉已经出现在视野中的图片

start()  

$(window).on('scroll', function(){ 
  start()
})

function start(){ 
  $('.container img').not('[data-isLoaded]').each(function(){  //忽略掉已经加载的图片，避免了再次判断
    var $node = $(this) 
    if( isShow($node) ) {  
      setTimeout(function(){  
        loadImg($node) 
      }, 500)
    }
  })
}

function isShow($node){  
  return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

function loadImg($img){ 
  $img.attr('src', $img.attr('data-src'))
  $img.attr('data-isLoaded',1)  //执行上面一行代码，即加载完图片后，给它设置 data-isLoaded 标记
}

记得去掉setTimeout

http://js.jirengu.com/bejow/1/edit?js,output