图片的懒加载

懒加载(lazyload)，即延迟加载，是一种对网页图片进行延迟加载处理的技术。说这货之前，先来碎嘴几句传统的网页加载方式。众所周知，浏览网页，经常会看到很多图片。正常情况下，浏览器会从上到下的加载 的图片标签，将他嵌进它原本应该在的地方。这样会导致什么问题呢？

当用户只是想打开个网页登录一下打个酱油就下了的时候呢，浏览器还在默默的加载着从服务器那端下载回来的页面，即使绝大部分图片是在用户不往下滚动页面就看不到的地方。这样势必就会造成资源的浪费，首先浏览器默默地加载完这些图片，用户看都不看做白工不说，服务器端也是亚历山大啊，尼玛每次一来请求都要发送网页的全部图片过去，用户不心疼流量，我心疼流量啊。特别是淘宝、京东这些图片数量非常巨大的电商，光首页就第一屏就得几十张图片了，如果还用传统的这种方式加载图片的话，那么用户体验是相当差的。所以这里就要说一下懒加载的工作原理了。

啥是懒加载呢

看名字就可以知道了，就是懒嘛。懒到什么程序呢？用户不看他，他就不加载了。这其实就是跟我们小时候做暑假作业是一样的道理，不到暑假最后一天，暑假作业一页都不会翻。

拥有同样的态度的呢，就是我们的懒加载同学了，**在用户没看到他的时候，他输出的只是一张不是很大内存的占位图，**而当用户往下划拉滚轮，屏幕将要看到懒加载同学的时候，这位同学才姗姗向服务器发送请求，下载真正的图片。这样的按需加载，造成的结果就是，服务器端压力变小，用户端节省了大笔流量的同时还提高了整体流畅度，真可谓双赢啊。所以，可见，懒有时候也是一种好事啊。

 

是时候展现真正的技术了

那么问题来了，前面说的这么酷炫，具体从技术方面，怎么实现呢？

本文给出一种利用jQuery库实现图片懒加载的原理，具体操作呢。

首先，元素的src属性值替换为占位图，真正的图片地址保存在自定义的属性当中，如下：

因此，在页面中显示的图片，其实就是一张占位图啦，在页面某处你还没看到的地方。当你往下拉页面的时候，看到这个图片的时候，利用jQuery去下载真正的图片，所以当网速非常快的时候，你压根就感知不到懒加载的动作。

所以问题似乎就变得简单了，等用户看到相应图片的时候，再把图片的属性值替换为的属性值就行了。这里就需要相应的编程语言跟计算机进行交互了，你不可能用大白话跟电脑说，它就听的明白的，用英语也不行。

所以就需要将人话翻译成编程语言了，首先，用户看到图片的情况呢，就是页面垂直方向的下拉距离加上垂直方向用户可见的区域距离大于图片所在的位置相对于页面的垂直距离了。

如图：

 

也就是在 成立的条件下，就可以加载真正的图像了；

所以结合相应的API，说浏览器能听的懂的话就是：

functionlazyload(){

var$win=$(window);

$('.lazy').each(function(){//a+b >=c的话

if($win.scrllTop()+$win.height()>=$(elt).offset.top){

//成立即可加载真正的图片

this.src=$(this).data('src');

}

})

}

好的，截止目前，我们给出了一种判断图像是否暴露在用户视野，如果是就加载真正图像的方法。

接下来，就要告诉浏览器同学，让她应该在什么时候，用这个方法来判断图片是否已经进入可视区域。记住，她已经知道如何做了，只是还不知道什么时候做。

这时候，又再一次结合相应API，说浏览器话就是：

$(window).on('scroll resize',function(){

//让浏览器在页面发生滚动或者窗口尺寸发生变化的时候触发lazyload方法lazyload();})

进展到这里，浏览器同学已经可以很好的进行懒加载了，你仿佛已经看见了在服务器机房维护的同事对你露出了的赞许的目光，听到在办公室打高尔夫的老板对你说出的肯定的话语，感受到用户可以自由自在打酱油的舒适，还有楼下买早茶的小美终于打算接受你每天买早茶打八折的建议……

最后再做点什么

优化，再做点优化，或者封装成一个模块或者是插件，让你可以早一点下班。

优化一

首先，浏览器会在每次用户滚动鼠标滚轮的时候，不停的触发事件并调用lazyload方法，这个无形之中可是会对性能打上几个这口的啊，所以有必要对他进行一些事件的稀释。

这个时候，又结合相应的API，说下浏览器能懂的话：

//I'm global

vartimer=null;

//用于存放定时器对象

$win.on('scroll resize',function(){

if(timer)return;

//当timer对象不为null的时候，直接退出函数timer=setTimeout(function(){

load();

console.log('test'); timer=null;},250)})

//虽然我是注释，但我也挺重要的

//这个骚操作能让用户在250毫秒内只能触发一次滚动事件

//从而将事件流大大稀释优化二

对已经加载了的图片，不进行lazyload判断，一些已经加载好了的图片，他又不会无端端地变为占位符，所以这个时候再循环遍历他们进行判断，也是会稍稍影响性能的

//在全局中找一个容器变量

var$container=$('.lazy');

//在lazyload函数中对需要进行懒加载的对象数组进行'瘦身'

functionlazyload(){

var$win=$(window);

$container.each(function(){//*//a+b >=c的话if($win.scrllTop()+$win.height()>=$(elt).offset.top){

//等式成立即可加载真正的图片this.src=$(this).data('src');

this.loaded=true;//添加一个‘标识’+

vartmp=$.grep($container,function(item){//返回未被加载过的图片return!item.loaded; }) $container=$(tmp);//对图像数组进行瘦身} }) }优化三

ok，已经加载完的图像也不会再进行判断了，那么如果我一个网页图像全部都加载完毕了，难道对象还要绑定 这些时间吗？ 当然不啦，接下来做的优化就是，当所有图像都加载完的时候，销毁绑定的事件

functionlazyload(){

//之前的一些代码,为了节约你的流量，我就不重复写了//添加判断方法if(isAllDone()){

destructor(); }}

functionisAllDone(){

//判断lazy图像是否都加载完毕//全部图像加载完，很明显 $container变量会被榨干return$container.length==; }}

functiondestructor(){

$(window).off('scroll resize',lazyload);}优化四

接着进行相应的封装或者写成插件，就可以拿来复用，以后就可以早点下班啦。

转载于:https://my.oschina.net/u/3888522/blog/1831604