为WordPress图像添加lazyload延迟
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家,仅供参考 对于 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 延迟有疑问可以找我们问答。 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助,欢迎收藏、点赞、推荐、分享。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |