1.前言
为什么使用懒加载？
原因很简单：在页面中（尤其是很长的页面中）一次性加载所有图片，网络请求代价太高，想象一下看官老爷想去买一件衣服，光首页加载图片就花掉几分钟，是不是感觉吃了shi？
什么是懒加载？
明白了上面的场景之后，懒加载就很好解释了：在需要的时候加载图片
也就引出了懒加载的原理：
- 当window检测到需要加载的内容出现在window边缘，就加载
- 否则不对img 标签中的src赋值
function：判断时候出现在屏幕边缘 返回值为ture或者false
function isShow($node){
windowHeight=$(window).height(),
scrollTop=$(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight+scrollTop>offsetTop&&scrollTop<offsetTop+nodeHeight){return true;}
else{return false;}
}
function: 将图片标签中的data-src自定义属性中的值（真正的图片url）复制给图片中的src以加载图片
function showImg($imgs){
$imgs.each(function(){
var imgUrl = $(this).attr('data-src');
$(this).attr('src',imgUrl);
$(this).addClass('shown');
})
}
让我们愉快的把两个函数串联起来～
$(window).on('scroll',function(){
$('.container img').not('.shown').each(function(){
if(isShow($(this))){
showImg($(this))
}
})
})
我的github主页可以下载
