WordPress教程
为WordPress图像添加lazyload延迟
PetitQ
收藏
对于 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 延迟有疑问可以找我们问答。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
