为WordPress图像添加lazyload延迟

2021-05-22 0 1,841 百度已收录

对于WordPress网站添加图像lazyload延迟是我们加速网站性能的一种,那么若作甚为WordPress图像添加lazyload延迟呢?虽然人人可能都在使用lazyload剧本插件,今天瑞课要说的是非lazyload剧本的方式,首先把以下代码加入您的函数文件。

  1. //lazyload延迟
  2. if( ! function_exists( 'ruike_lazyload_image_attributes' )){
  3. 	//add_filter( 'wp_get_attachment_image_attributes', 'ruike_lazyload_image_attributes', 8, 3 );
  4. 	function ruike_lazyload_image_attributes( $attr, $attachment, $size ) {
  5.                 #在后内容中显示当前图像
  6. 		if(in_array( 'the_content', $GLOBALS['wp_current_filter'] ) ){
  7. 			return $attr;
  8. 		}
  9. 		if( ! is_admin() && ! is_feed() ){
  10. 			$attr['class']   .= ' lazy-img';
  11. 			$blank_image      = THEME_PL.'/images/tie-empty.png';
  12. 			/* 这里可以设置差其余
  13. 			$blank_size       = ( $size == 'ruike-image-small' ) ? '-small' : '';
  14. 			$blank_image      = THEME_PL.'/images/tie-empty'. $blank_size .'.png'; */
  15. 			$attr['data-src'] = $attr['src'];
  16. 			$attr['src']      = $blank_image;
  17. 			/*若是主题没有增添去除WP默认图像自顺应请去除注解
  18. 			unset( $attr['srcset'] );
  19. 			unset( $attr['sizes'] ); */
  20. 		}
  21. 		return $attr;
  22. 	}
  23. }

然后我们在添加相对的JS剧本代码,固然这里也是需要凭证您的主题而修改。

  1. jQuery('.autocomplete-suggestions').find('.lazy-img').each(function() {
  2.      jQuery(this).attr('src', jQuery(this).attr('data-src')).removeAttr('data-src');
  3. })

最后附送点CSS,需要凭证自己主题修改。

  1. .is-lazyload .lazy-img[src*="tie-empty"]{
  2.     opacity: 1;
  3.     background-image: linear-gradient(to left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  4.     background-repeat: no-repeat;
  5.     background-color: #f6f7f8;
  6.     background-size: 450px 700px;
  7.     -webkit-animation: lazyloadeffect 1s infinite linear forwards;
  8.     animation: lazyloadeffect 1s infinite linear forwards;
  9. }
  10. @-webkit-keyframes lazyloadeffect {
  11.   from {
  12.     background-position: -400px 0;
  13.   }
  14.   to {
  15.     background-position: 200px 0;
  16.   }
  17. }
  18.  
  19. @keyframes lazyloadeffect {
  20.   from {
  21.     background-position: -400px 0;
  22.   }
  23.   to {
  24.     background-position: 200px 0;
  25.   }
  26. }

若是您对本篇WordPress图像添加lazyload延迟有疑问可以找我们问答。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 为WordPress图像添加lazyload延迟 https://zhutizhen.com/14637.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章