让代码更简单

当前位置:代码狗 > WordPress > WP建站 > 正文

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

重要:本文最后更新于2020-09-18 09:18:33,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

好久之前就听说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,不用。

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

感觉很棒!可以赞赏支持我哟~

赞(1) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝