WordPress5.5图片懒加载实现原理

好久之前就听说wordpress5.5将会自带图片懒加载功能，直至前段时间更新5.5后，有大鸟看了源码发了其实现过程的文章，写得很不错，分享给大家看看。另外，建议懒加载还是不要使用wordpress自带方式实现，看了文章你就知道了。

Chrome 76 版本开始支持原生懒加载特性，只需简单的给图片加上 loading="lazy" 属性。没错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，不用。

文章内容来自水煮鱼，我还没更新，所以具体内容不清楚，哈哈哈。