对于 WordPress 网站添加图像 lazyload 延迟是我们加快网站性能的一种，那么如何为为 Word…--由S9社区整理
对于 WordPress 网站添加图像 lazyload 延迟是我们加快网站性能的一种，那么如何为为 WordPress 图像添加 lazyload 延迟呢？虽然大家可能都在使用 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; -
} -
}
如果您对本篇 WordPress 图像添加 lazyload 延迟有疑问可以找我们问答。
