为WordPress图像添加lazyload延迟
对于 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 延迟有疑问可以找我们问答。
http://xzh.i3geek.com1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除
资源客 » 为WordPress图像添加lazyload延迟
资源客 » 为WordPress图像添加lazyload延迟