“延迟加载”的原理及实现

Lazy Load,中文大概可以译成“延迟加载”,是一种常见的降低网站流量的方式。它的大概原理是,以图片为例,在刚打开页面的时候,图片不加载,只要在用户看到图片的时候,才去加载图片。如果一个页面很长,平均分布着很多图片,那么用户在刚打开页面的时候,只能看到顶部的少量图片,如果这位用户没有看完全部的网页,那么页面底部的一些图片,即使加载了,他也没有看到,白白浪费了流量。于是对于图片大站来说,使用“延迟加载”技术,可以节约很多流量。

前几天我把博客的 Gravatar 重新开启了,并且做了反代,为了不让 Gravatar 占用太多流量(以及降低网页的加载速度),我把 Gravatar 的图片都做了延迟加载,等用户浏览到评论区了之后,才开始一点点加载。同时,搜索引擎的爬虫也访问不到 Gravatar,不会空跑无谓的流量。

在 WordPress 中使用“延迟加载”,除了使用插件之外,自己写代码也不难。首先,我们要修改服务器端的代码,使得默认输出是一个空白的图片:

上面代码把 Gravatar 图片的 src 改成了 data-src、srcset 改成了 data-srcset,并且重新设定了一个 src,是一个 1px * 1px 的空白图片。

接下来,要写一段 Javascript,动态地加载实际的 Gravatar 图片:

这段代码用来判断一个 element 是不是已经进入用户的视野,由于浏览过程中只可能向下或是向右滚动,所以只需要判断下边界和右边界即可。

上述代码检查所有 Gravatar 图片,并把已经可见的图片,替换成实际的图片。

最后,把 checkElements 函数挂载到一些事件中去,这样用户浏览页面的过程中,脚本会自动执行并替换图片。

于是,一个简易版本的“延迟加载”功能就实现了,是不是很方便呢?