延迟加载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;	
}