最新公告
  • 欢迎您光临更好小站,本站频繁遭到攻击,如无法访问请晚点或次日访问,感谢!立即加入我们
  • 声明:“付费源码经本站测试后发布,下载即用;相对于别的资源站,搬运但不测试, 付费购买又不能用!不是浪费大家时间?欢迎大家支持我们!签到投稿即可获得积分下载!“

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

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

    1.

    本站坚持“不能用的源码发出去都是浪费大家时间“,付费源码都是亲测的


    源码已测试,但不保证完美无bug


    3.更好小站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,请练习客服予以删除。

    更好小站 » WordPress为图像添加lazyload延迟

    发表评论