一段小巧、轻便的延迟加载（lazy loading）代码轻松搞定图片懒加载

也许大家为了优化前端网页加载而使用图片懒加载（也叫图片延迟加载，lazy-loading image）功能，这样可以让首屏展现更加流畅，提升用户体验。网上有很多关于懒加载的 JavaScript 代码，对于 WordPress 而言，也有很多优化插件中也包含了懒加载选项设置。但笔者试用了一些 WordPress 插件中的懒加载功能，感觉不是特别理想，有些把页面彻底截断了，有些在使用谷歌 PageSpeed 工具分析的时候仍提示没有设置懒加载（尤其是在手机端）。

最近闲逛，发现了一段非常小巧而轻便的懒加载代码，名字叫 echo，尽管是几年前的作品，但放在 WordPress 上面一点也不过时。echo.js 使用了 HTML5 的 data-* 属性（注意，不兼容 IE6、IE7），不依赖任意第三方插件库，特别适用于移动端需要加载大量图片的场景，而且只需要简单的设置即可。

原始文件可从 github 原作者那里下载： github.com/toddmotto/echo

怎么使用？

可以这样引入 js 文件（地址自行定义）：

本网站（时光在路上，https://www.timezls.com，ｈｔｔｐs：／／ｗｗｗ．ｔiｍｅｚｌｓ．ｃｏｍ）采用BY-NC-SA协议进行授权，凡本网强调版权为本网所有的文/图，使用时必须注明文章来源，违者本网将依法追究责任。本网在文章中注明来源的文/图等稿件均为转载或经过编辑整理，本网出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如其他媒体、网站或个人从本网下载使用，必须保留本网注明的稿件来源信息，并自负版权等法律责任。如果您看到这两段隐藏文字，说明您在浏览器设置中关了JavaScript属性。关闭此属性后本站一些功能将会丢失，排版可能会导致错乱，请不要这样做。

＜script src="/echo.js"＞＜/script＞

然后在图片中这样设置（图片地址、alt、width、height属性可自行设置，此处忽略）：

＜img src="/placeholder.jpg" data-echo="/image.jpg" /＞

其中 placeholder.jpg 是一张非常非常小的图片（例如像素为1 x 1），用做懒加载的默认图片，而 image.jpg 则是最终要加载的真实图片。

最后，在 JavaScript 代码中对引入的 echo.js 做如下设置：

echo.init({
offset: 0, //离可视区域多少像素的图片可以被加载，默认为0
throttle: 250, //图片延迟多少毫秒加载，默认为250
unload: false //告诉echo是加载还是卸载视图中的图片，也就是只加载一次，离开视线后图片不回到 placeholder.jpg，默认为false
});

可以把上面这段代码并入 echo.js 之中。

至于其他参数的说明，详见原作者的主页。

WordPress 中怎么做相应的改造？

在主题文件 functions.php 中加入如下代码，把＜img＞标签中的 src 替换为 data-echo，并加入默认图片的 src 地址：

add_filter ('the_content', 'lazyloading'); // 在`the_content`中替换
function lazyloading($content) {
$loadimg_url='/placeholder.jpg'; //懒加载的默认图片
if(!is_feed()||!is_robots) { //避免蜘蛛抓取 placeholder.jpg。纯静态页面失效
$content=preg_replace('/＜img(.+)src=[\'"]([^\'"]+)[\'"](.*)＞/i',"＜img\$1data-echo=\"\$2\" src=\"$loadimg_url\"\$3＞",$content);
}
return $content;
}

如果你想往缩略图和头像中添加懒加载，则可添加如下类似的代码到 functions.php 中，类似于上面的替换：

add_filter( 'post_thumbnail_html', '函数1');
function 函数1() {
}
//或/和
add_filter( 'get_avatar', '函数2' );
function 函数2() {
}

上述改造 WordPress 的代码已经放在网盘里，可自行下载选用：pan.baidu.com/s/1mqL-XUfqZcmS1C5MXurkNA ，提取码: zwsb

题外话：Chrome 75 起，原生支持图片的延迟加载

如果你不想再多添加上面的js代码，可以试试 Chrome 的原生延迟加载，只需在＜img＞标签中添加 loading="lazy"，即：＜img src="..." loading="lazy" /＞。

不过，据我观察，在PC端，打开首屏以后，非首屏的很多图片也会同时加载，如果你图片足够多、页面很长（height）的话，可以显现出懒加载的优势，如果你文章里三四张图片，基本看出来有这个支持懒加载的功能，打开首屏以后，基本上“屏幕外”的几张图片都会同时加载了。

而且，在移动端，经过谷歌测试工具检测，仍然在提示建议延迟加载“屏幕外”图片。好像并没起多大作用。

再有，如果你使用了上述js延迟加载的代码，并且添加了 loading="lazy"，也会让上述js代码效能降低很多，因为一些“屏幕外”的图片也同时和首屏的图片一起加载了。所以最好单独使用上述js代码。

WordPress 对图片延迟加载（懒加载）功能的支持

WordPress从5.5版本开始，里面就增加了一个内置图片延迟加载（懒加载）功能。新版本会向正文引用的图片代码中加入 loading="lazy" 属性。但是，如前所述，有时候用js代码，还是直接把这个功能关了吧。

图片加载过程中的修饰

可以对图片加载过程中进行修饰，例如设置渐变效果，通过改变透明度：把未加载新图片时的位置设置成不透明，把加载图片后设置成完全透明，通过CSS代码设置：

.e-lazy {
-webkit-transition: opacity 0.5s ease-in-out 0.1s;
-moz-transition: opacity 0.5s ease-in-out 0.1s;
-o-transition: opacity 0.5s ease-in-out 0.1s;
transition: opacity 0.5s ease-in-out 0.1s;
opacity: 0;
}

加载图片之后增加一个类 .loaded：

.e-loaded {
opacity: 1;
}

那么未加载新图片之前，html代码书写格式就变成了类似于 ＜img src="占位图片" data-echo="要加载的图片地址" class="e-lazy" /＞ 这种。加载之后，变成 ＜img src="占位图片" data-echo="要加载的图片地址" class="e-lazy e-loaded" /＞。

如何在图片加载时引入 .loaded 类？JavaScript 代码解决，有很多方法可以添加新的类。结合本例中的 echo.js 代码，只需要在代码中把 data-echo= 变成 src= 之后添加即可。