对于 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. }

19. @keyframes lazyloadeffect {

20.   from {

21.     background-position: -400px 0;

22.   }

23.   to {

24.     background-position: 200px 0;

25.   }

26. }

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