WordPress 图片的懒加载实现方式

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

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


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

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

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

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

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

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

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


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

本站长期承接 WordPress 优化建站业务,要求很高,有兴趣请联系微信:「chenduopapa」或微信公众号:「WordPress果酱」。

热门文章