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 延迟有疑问可以找我们问答。

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

0
分享到:
搬码资源网广告位

评论0

请先

没有账号? 忘记密码?