jquery lazyload源码分析

这是一款很老很有名的插件了,专门用于图片延迟加载,github地址如下:

https://github.com/tuupola/jquery_lazyload

下面,我摘取比较重要的代码说明一下它的实现思路,代码量非常小10分钟就可以看完:

基础原理

如果一个网页很高、图片很多,那么浏览器就会并行的下载图片,对网速一般的用户是体验很差的,为什么呢?

  • 图片加载是并发的异步的,不同位置的图片加载完成的次序就会不同,可能导致网页上面的图片还没下载完,后面的就完成了,造成一种不流畅感。
  • 正因为图片并发下载,用户带宽和服务器带宽有限的情况下,这样的资源竞争可能导致整体加载时间拖长。

那么图片延迟加载是怎么优化这个问题呢?

很简单,当图片区域进入视野的时候才让其进行下载,那怎么实现呢?我们知道,<img src=””>一旦设置src属性,浏览器就会启动下载,因此插件的思路是不设置src属性,而是等待<img>区域进入视野后再设置src属性。

因此,lazyload插件让我们把图片的url写在其他属性里:

加载时机

插件会在浏览器ready事件触发后,搜集所有<img>标签保存成数组,现在的问题就变成了:什么时机设置这些<img>的src属性呢?

插件选择了2个时机,一个是浏览器的scroll事件,一个是浏览器的resize事件,意图很容易理解,通常只有这2个行为会导致图片从视野之外进入到视野之内。

滚动事件scroll

窗口尺寸变化resize

检测方法

当上面的事件发生的时候,我们知道可能某些图片进入了视野,那么具体是哪些图片进入了视野呢?

那就是update方法的事情了:

elements是网页中所有的<img>标签数组(Jquery数组),遍历所有<img>标签判断哪些<img>在视野范围内即可。

  • 第一个if分支:表明该<img>在屏幕上方之外或者在屏幕左侧之外则什么也不用做,否则说明<img>在屏幕上方之内与屏幕左侧之内,需进入下面的第二个分支。
  • 第二个if分支:判断<img>是否在屏幕下方之外或者屏幕右侧之外,如果不是则说明<img>就在视野范围内了,立即给<img>触发自定义的appear事件以便进一步处理。
  • 第三个if分支:如果<img>在屏幕下方或者屏幕右侧之外,则停止each遍历,这是什么意图呢?为了减少遍历的性能损耗,下面具体说说。

首先,这个选项的出现主要是因为每次滚动scroll都要遍历elements数组中所有的img,判断它们哪些进入了视野,这本身是很耗费性能的,因此如何机智的停止遍历就很重要了。

elements数组最初是采用jquery的选择器语法获取的,它按照深度遍历方式从上至下,从外至内的遍历DOM节点搜集img标签,因此当发现图片在屏幕下方或右侧之外的时候,作者认为剩余的图片按照常规的DOM顺序都应该在视野之外,就不必再继续判断后续的img了(可以参考github issue)。

当然,作者这个优化的前提是DOM结构比较简单(比如自上而下的新闻图片),对于复杂的DOM结构(比如纵横2个方向都有滚动条)是可能出现误判导致视野内的图片无法加载的,因此该插件可以提供一个阀值failure_limit来控制是否可以额外探测一些img标签。

加载图片

其实在初始化插件的时候,已经为elements数组里的所有<img>绑定了appear事件处理函数:

这里this是用户传入的的jquery元素选择器,等价于elements数组,收集了符合选择器的<img>标签。

当一个<img>标签触发了appear事件后,说明该<img>已经进入视野,因此插件会通过$(‘<img />’)创建一个临时的img DOM节点,并设置它的src属性为真实图片地址,这样浏览器就会去下载这个图片了。

一定要注意,这里并不是直接设置<img>标签的src,而是创建一个临时img并设置其src从而下载图片,这样做的目的是为了有机会控制<img>图片的淡入淡出效果。

当临时img下载图片完成时,浏览器会触发load事件通知图片加载完成,这时候浏览器已经将图片保存在本地并且缓存,因此这时候给原始的<img>设置src属性可以保障图片立即渲染。

插件提供图片的淡入效果,具体做法就是先把<img>通过hide()隐藏起来,然后接着调用了可配置的过渡函数,插件默认调用show()方法,并传入一个过渡动画时间参数,这样就实现了淡出的感觉。

当然,接下来要标记这个<img>的loaded=true,这背后也是有意图的:当一个未加载的<img>进入视野后,插件创建临时img进行图片加载,但是我们知道下载图片是需要时间的,极有可能load完成回调可迟迟没有到来,这时候再次滚动会再次触发该<img>的appear事件,按逻辑又会创建另外一个临时img加载同样的图片,因此第一个加载完成的回调中将loaded设置为true,可以跳过后续重复的没有意义的load回调逻辑。

另外,为了减少elements的大小,从而减小每次update函数的遍历成本,所有加载成功的<img>标签都将从elements数组中移除,这里用的jquery的grep方法将返回一个过滤后的数组,而$(数组)将返回一个jquery包装的elements数组对象,可以参考grep方法说明

关于jquery lazyload插件就说到这里,另外值得参考的是lazyload封装成jquery插件的方式。

发表评论

电子邮件地址不会被公开。