WordPress 图片的懒加载实现方式
WordPress 5.5 新增了图片的懒加载功能,一开始我以为是通过前端 JS 等一系列超级牛逼的技术实现的…
WordPress 5.5 新增了图片的懒加载功能,一开始我以为是通过前端 JS 等一系列超级牛逼的技术实现的,后来翻了一下代码,WordPress 只是简单的给图片加上 loading="lazy"
的属性,这样就行??
不懂就去搜索,原来这是浏览器的新特性,Chrome 76 版本开始支持原生懒加载特性,原来如此。真的是,前端两天不了解,就要落伍。?
还是说回 WordPress 懒加载的实现方式吧,再简单,我也要多说两句。?
首先 WordPress 5.5 给 the_content
接口新增了 wp_filter_content_tags
函数,它主要做三件事情:
- 根据图片的 ID 给没有
width
和height
的图片标签加上这两个属性。 - 根据图片的 ID 给图片标签加上
srcset
属性。 - 给图片标签加上
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」。
类别:WordPress技巧、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!