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