国外免费vps
国内免费vps云服务器

wordPress 图片的延迟加载实现方式以及如何禁用

WordPress 5.5 新增了图片的延迟加载功能,此功能不是通过前端JS等方式去实现的,而是根据Chrome 76浏览器的新特性支持原生延迟加载特性实现的,仅仅只是简单的给图片加上 loading=”lazy” 的属性。

WordPress5.5延迟加载的实现方式

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,不用。

禁用WordPress 5.5 图片延迟加载功能

将下面代码添加到当前主题函数模板 functions.php 中即可。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

以上代码是全局禁用,只禁用特定标签的图片延迟加载:

 add_filter(
'wp_lazy_loading_enabled',
function( $default, $tag_name, $context ){
if ( 'img' === $tag_name && 'the_content' === $context ){
return false;
}
return $default;
},
10,
3
);

其中:

  • $default:布尔默认值 true
  • $tag_name:要延迟加载的元素的标记名称。
  • $context:指定图像上下文的可选参数。

禁止特色图片延迟加载:

add_filter(
'wp_img_tag_add_loading_attr',
function( $value, $image, $context ){
if ( 'the_content' === $context ){
$image_url = wp_get_attachment_image_url( 67, 'medium' );
if ( false !== strpos( $image, ' src="' . $image_url . '"' ) ) {
return false;
}
}
return $value;
},
10,
3
);

赞(0)
【声明】:wordPress 图片的延迟加载实现方式以及如何禁用来源于网络。本站不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址