为WordPress图像添加lazyload延迟

网站添加图像 lazyload 延迟是我们加快网站性能的一种，首先把以下代码加入您的函数文件。

//lazyload延迟
if( ! function_exists( 'ruike_lazyload_image_attributes' )){
	//add_filter( 'wp_get_attachment_image_attributes', 'ruike_lazyload_image_attributes', 8, 3 );
	function ruike_lazyload_image_attributes( $attr, $attachment, $size ) {
                #在后内容中显示当前图像
		if(in_array( 'the_content', $GLOBALS['wp_current_filter'] ) ){
			return $attr;
		}
		if( ! is_admin() && ! is_feed() ){
			$attr['class']   .= ' lazy-img';
			$blank_image      = THEME_PL.'/images/tie-empty.png';
			/* 这里可以设置不同的
			$blank_size       = ( $size == 'ruike-image-small' ) ? '-small' : '';
			$blank_image      = THEME_PL.'/images/tie-empty'. $blank_size .'.png'; */
			$attr['data-src'] = $attr['src'];
			$attr['src']      = $blank_image;
			/*如果主题没有增加去除WP默认图像自适应请去除注解
			unset( $attr['srcset'] );
			unset( $attr['sizes'] ); */
		}
		return $attr;
	}
}

然后我们在添加相对的 JS 脚本代码，当然这里也是需要根据您的主题而修改。

jQuery('.autocomplete-suggestions').find('.lazy-img').each(function() {
     jQuery(this).attr('src', jQuery(this).attr('data-src')).removeAttr('data-src');
})

最后附送点 CSS,需要根据自己主题修改。

.is-lazyload .lazy-img[src*="tie-empty"]{
    opacity: 1;
    background-image: linear-gradient(to left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-color: #f6f7f8;
    background-size: 450px 700px;
    -webkit-animation: lazyloadeffect 1s infinite linear forwards;
    animation: lazyloadeffect 1s infinite linear forwards;
}
@-webkit-keyframes lazyloadeffect {
  from {
    background-position: -400px 0;
  }
  to {
    background-position: 200px 0;
  }
}
 
@keyframes lazyloadeffect {
  from {
    background-position: -400px 0;
  }
  to {
    background-position: 200px 0;
  }
}