懒加载
作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。幸运的是，我们有懒加载这个绝招，它可以帮助我们减少加载时间和降低负载，而不在内容上偷工减料。
认识懒加载
什么是懒加载？
懒加载是一种在页面加载时延迟加载一些非关键资源的技术，换句话说就是按需加载。
我们之前看到的懒加载一般是这样的形式：
- 浏览一个网页，准备往下拖动滚动条
- 拖动一个占位图片到视窗
- 占位图片被瞬间替换成最终的图片
为什么使用懒加载而不直接加载？
- 浪费流量。在不计流量收费的网络，这可能不重要；在按流量收费的网络中，毫无疑问，一次性加载大量图片就是在浪费用户的钱。
- 消耗额外的电量和其他的系统资源，并且延长了浏览器解析的时间。因为媒体资源在被下载完成后，浏览器必须对它进行解码，然后渲染在视窗上，这些操作都需要一定的时间。
懒加载图片和视频，可以减少页面加载的时间、页面的大小和降低系统资源的占用，这些对于性能都有显著地提升。总体来讲，就是改善用户体验，增强页面性能。
图解
通过下图所示（绿色为页面范围，红色为窗口范围，蓝色为待显示元素）。 $(window).scrollTop() 为 页面顶部 到 窗口顶部的高度。 $(window).height() 为 窗口的高度。$node.offset().top 为页面顶部到待显示元素的高度。即我们可以知道如何判断一个元素，是否进入用户视野范围内，即
$node.offset().top <= $(window).height() + $(window).scrollTop()
条件满足的时候，这个元素就进入了我们的视野。
进入视野 与 抵达底部
如何判断元素出现在用户视野？
$(window).scrollTop()为 页面顶部 到 窗口顶部的高度。$(window).height()为 窗口的高度。$node.offset().top为页面顶部到待显示元素的高度。即我们可以知道如何判断一个元素，是否进入用户视野范围内，即
$(window).height() + $(window).scrollTop() >= $node.offset().top条件满足的时候，这个元素就进入了我们的视野。（上图已经分析过）
如何判断浏览器滚动到最底部？
$(window).scrollTop()为 页面顶部 到 窗口顶部的高度。$(window).height()为 窗口的高度。$('body').height()为页面整个文档的高度。即我们可以知道如何判断浏览器是否滚动到最底部，即$(window).height() + $(window).scrollTop() >= $('body').height()条件满足的时候，浏览器滚动到最底部。
懒加载的实现
//进页面直接调用
start()
// 滚动的时候执行加载函数
$(window).on('scroll',function(){
start()
})
//加载函数
function start(){
//not('[data-isLoaded]') 用来过滤已经加载过的，实现节流
$('.container img').not('[data-isLoaded]').each(function(){
if( isShow($(this)) ){
loadImg($(this))
}
})
}
// 判断是否进入视野的函数
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
// 格式化图片加载地址函数
function loadImg($img){
//setTimeout模拟延迟 测试效果用，实际环境不要加
// setTimeout(function(){
$img.attr('src', $img.attr('data-src'))
// },500)
//加载过后就添加 data-isLoaded属性
$img.attr('data-isLoaded',1)
}
Demo 效果预览
懒加载效果预览
该 demo 添加了 setTimeout 便于直观的查看懒加载的效果，实际应用的时候不要添加，因为懒加载的作用就是增强用户体验的。
结合该 demo 更好的理解之前的图解
$(window).height() + $(window).scrollTop() < $(node).offset().top
$(window).height() + $(window).scrollTop() >= $(node).offset().top
