懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。
我们之前看到的懒加载一般是这样的形式：
. 浏览一个网页，准备往下拖动滚动条
. 拖动一个占位图片到视窗
. 占位图片被瞬间替换成最终的图片
我们可以在示例中看到懒加载是如何使用的，网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。
操作代码如下：
<img class="langlazygif" src="lib/css/loading.gif" data-srcgif="real.jpg" alt="" />
//滚动事件
$(window).on('scroll',function(){
start ();
})
//加载函数
function start (){
//if($(window).scrollTop()>150) start ();
// alert(0);
var topv = $('.langlazygif').offset().top;
console.log("top:"+topv);
// console.log($(window).height() + $(window).scrollTop());
$('.langlazygif').not('[data-isLoaded]').each(function(){
var $node = $(this);
var hg1 = $node.offset().top;
var hg2 = $(window).height() + $(window).scrollTop();
//$('.temp11').html("hg1:"+hg1+"===hg2:"+hg2);
//console.log("hg1:"+hg1);
//console.log("hg2:"+hg2);
if(hg2>hg1) {
//缓冲效果
setTimeout(function(){
loadIng( $node)
},500)
}
})
}
// 显示状态
function loadIng($img){ //alert('ok');
$img.attr('src', $img.attr('data-srcgif'))
$img.attr('data-isLoaded', 1)
}
