lazyload.css,图片加载优化及图片lazyload自适应 - 轩枫阁

前言

本文介绍针对轩枫阁V3主题开发过程中，遇到的图片问题及加载优化。

图片居中裁剪

本站的每一篇文章，都会配一张570×200的特色图像，使文章不那么单调。

然而移动端移动端首页图片为60×60的正方形配图，这里有两种解决方案。

设置缩略图大小，在wp管理端-设置-多媒体，设置缩略图尺寸为1:1

结合CSS3的background-size，将配图作为背景图，并显示中间的正方形区域即可

方法一可以安装插件，将旧文章的图片重新生成。由于轩枫阁在V3主题上线前，已更新400篇文章，使用方法一意味着图片存储会增加，而且意义不大。

而这一表现仅在移动端，所以可以完美使用CSS3,。

1

2

3

4

5

.thumb{

background-image:url(http://www.xuanfengge.com/wp-content/uploads/2016/04/gfdgfdgf-300x105.jpg);

background-size:cover;

background-position:centercenter;

}

lazyload

lazyload即图片懒加载，滚动到的图片才会加载，节省流量及加快加载速度，提升体验。

wp如何使用lazyload呢？在functions.php加上如下代码

1

2

3

4

5

6

7

8

9

10

11

// lazyload

functionlazyload($content){

if(!is_feed()||!is_robots){

$content=preg_replace('//i',"\n",$content);

}

return$content;

}

// 文章内容

add_filter('the_content','lazyload');

// 特色图像

add_filter('post_thumbnail_html','lazyload');

这时候所有的图片src会替换成灰色底图，可以结合lazyload.js(推荐用jieyou的版本，jquery.lazyload.js提供的方法不够多)。

1

2

// js代码

$("img.lazyload").lazyload();

PC端

使用之后，会发现存在一些问题。如发现图片加载之后，页面发生抖动，或者超大图产生变形的问题。

在PC端如果从上往下读，正常网速下，图片抖动的机会比较小，所以这个点只在移动端处理。

页面输出的img结构

1

其中会包括图片本身的宽高，data-original为原图url。

发现对于超出页面显示宽度的大图，会存在变形的问题，如1200×848的图(文章地址)，自适应会显示成802×848的尺寸：

这里为了不产生变形，得在加载之后，给图片增加样式 height: auto; 防止变形。这里是使用增加class的方法，同时将fadeIn的效果用CSS3的形式加入(js插件本身支持动画，但是CSS3动画性能更好)。代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

// lazyload js代码

$("img.lazyload").lazyload({

effect:"show",

data_attribute:'original',

threshold:100,

load:function($elements,elements_left,options){

// 不能设置否则图像 未加载时宽高比1:1 不设置大图会不正常比例

// 所以在lazyload之后手动加上

// 同时结合CSS3处理fadeIn动画

$elements.addClass('autoheight');

}

});

autoheight的样式为

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

.autoheight{

height:auto;

-webkit-animation-duration:1s;

animation-duration:1s;

-webkit-animation-fill-mode:both;

animation-fill-mode:both;

-webkit-animation-name:fadeIn;

animation-name:fadeIn;

}

@-webkit-keyframesfadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframesfadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

.fadeIn{

-webkit-animation-name:fadeIn;

animation-name:fadeIn;

}

效果图

移动端

在移动端中，文章图片的尺寸往往大于屏幕宽度，图片加载完成后会发生抖动。

在图片加载之前，得对图片设置宽高，而图片的宽高得根据不同设备的分辨率来处理，JS处理代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

functionimgInit(){

var$img=$('img.lazyload');

// 设置图片样式

varsetLazyloadImgStyle=function(img,_width,_height){

!isNaN(_width)?_width+='px':'auto';

!isNaN(_height)?_height+='px':'auto';

img&& img.css({

'width': _width + ' !important',

'height': _height + ' !important',

'visibility': 'visible !important'

});

}

$img.each(function(){

var_width=$(this).attr('width')||this.width;

varimgWidth=_width>winWidth?winWidth:_width,

imgHeight=this.height *imgWidth/_width;

setLazyloadImgStyle($(this),imgWidth,imgHeight);

});

// lazyload

$img.lazyload({

effect:'show',

threshold:100,

data_attribute:'original',// 图片的真实url属性

placeholder_data_img:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQzA1MTVGNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDQzA1MTYwNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNDMDUxNUQ2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNDMDUxNUU2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6p+a6fAAAAD0lEQVR42mJ89/Y1QIABAAWXAsgVS/hWAAAAAElFTkSuQmCC',

// 图片加载完毕时回调

load:function($element,elements_left,options){

setLazyloadImgStyle($element,'auto','auto');

}

});

}

imgInit();

效果图