WordPress 图片的懒加载实现方式

WordPress 5.5 新增了图片的懒加载功能，一开始我以为是通过前端 JS 等一系列超级牛逼的技术实现的，后来翻了一下代码，WordPress 只是简单的给图片加上 loading="lazy" 的属性，这样就行？🤔

不懂就去搜索，原来这是浏览器的新特性，Chrome 76 版本开始支持原生懒加载特性，原来如此。真的是，前端两天不了解，就要落伍。😂

还是说回 WordPress 懒加载的实现方式吧，再简单，我也要多说两句。😂

首先 WordPress 5.5 给 the_content 接口新增了 wp_filter_content_tags 函数，它主要做三件事情：

1. 根据图片的 ID 给没有 width 和 height 的图片标签加上这两个属性。
2. 根据图片的 ID 给图片标签加上 srcset 属性。
3. 给图片标签加上 loading="lazy" 属性。

其中第三点就是实现图片懒加载的，具体执行的函数是 wp_img_tag_add_loading_attr，它把前面获取的图片标签，一个个判断一下有没有 width 和 height 属性，如果有的话，就加上 loading="lazy" 属性。

另外 WordPress 还提供了懒加载相关的两个接口：

• wp_img_tag_add_loading_attr：loading 属性的值，默认是 lazy 就是懒加载，也可以根据 $img 改成 eager，就是立即加载。
• wp_lazy_loading_enabled：是否启用懒加载，默认是 true 启用，也可以改成 false，不用。

记录一下，省的以后再翻源代码，WPJAM Basic 也针对懒加载模式做了一些功能优化方面的兼容。😀

©我爱水煮鱼，本站推荐使用的主机：阿里云，国外主机建议使用BlueHost。

本站长期承接 WordPress 优化和建站业务，请联系微信：「chenduopapa」。