WordPress

延迟加载WordPress特色图像(2021)

WordPress 5.5将Lazy Loading变为默认功能,所有出现在内容区域里有width和height属性的图片,都会默认添加loading="lazy"属性,这是浏览器级别实现的lazy load,大部分现代浏览器都支持。本文介绍延迟加载WordPress特色图像的方法。

延迟加载WordPress特色图像的代码如下:

add_filter( 'wp_get_attachment_image_attributes', 'sola_lazy_load_featured_image', 10, 3 );
function sola_lazy_load_featured_image( $attr, $attachment, $size ) {
    if ( ! is_admin() && ! array_key_exists( 'loading', $attr ) ) {
        $attr['loading'] = 'lazy';
    }
    return $attr;
}

$attr允许我们给img标签添加属性,除了loading属性,还可以添加自定义data属性,例如data-target等等。

如果你的特色图像是Above-the-fold图片,那就不能添加lazyl load属性,因为没有lazy load的必要,加上这个属性反而会降低网站加载速度。

例如,你的博客archive页面显示特色图像,第一篇文章的特色图像可能是 Above-the-fold 图片,我们可以通过代码告诉程序不要给第一篇文章的特色图像添加lazy loading属性。

function sola_lazy_load_featured_image( $attr, $attachment, $size ) {

	if( !is_admin() ){

		global $wp_query;

		if( $wp_query->current_post !== 0 ){
			if ( ! array_key_exists( 'loading', $attr ) ) {
			    $attr['loading'] = 'lazy';
			}
		}    
		    
	}

	return $attr;	
}

2条评论

留言

您的电子邮箱地址不会被公开。 必填项已用*标注