lazyload.css,图片加载优化及图片lazyload自适应 - 轩枫阁
前言
本文介紹針對(duì)軒楓閣V3主題開發(fā)過程中，遇到的圖片問題及加載優(yōu)化。
圖片居中裁剪
本站的每一篇文章，都會(huì)配一張570×200的特色圖像，使文章不那么單調(diào)。
然而移動(dòng)端移動(dòng)端首頁圖片為60×60的正方形配圖，這里有兩種解決方案。
設(shè)置縮略圖大小，在wp管理端-設(shè)置-多媒體，設(shè)置縮略圖尺寸為1:1
結(jié)合CSS3的background-size，將配圖作為背景圖，并顯示中間的正方形區(qū)域即可
方法一可以安裝插件，將舊文章的圖片重新生成。由于軒楓閣在V3主題上線前，已更新400篇文章，使用方法一意味著圖片存儲(chǔ)會(huì)增加，而且意義不大。
而這一表現(xiàn)僅在移動(dòng)端，所以可以完美使用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即圖片懶加載，滾動(dòng)到的圖片才會(huì)加載，節(jié)省流量及加快加載速度，提升體驗(yàn)。
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;
}
// 文章內(nèi)容
add_filter('the_content','lazyload');
// 特色圖像
add_filter('post_thumbnail_html','lazyload');
這時(shí)候所有的圖片src會(huì)替換成灰色底圖，可以結(jié)合lazyload.js(推薦用jieyou的版本，jquery.lazyload.js提供的方法不夠多)。
1
2
// js代碼
$("img.lazyload").lazyload();
PC端
使用之后，會(huì)發(fā)現(xiàn)存在一些問題。如發(fā)現(xiàn)圖片加載之后，頁面發(fā)生抖動(dòng)，或者超大圖產(chǎn)生變形的問題。
在PC端如果從上往下讀，正常網(wǎng)速下，圖片抖動(dòng)的機(jī)會(huì)比較小，所以這個(gè)點(diǎn)只在移動(dòng)端處理。
頁面輸出的img結(jié)構(gòu)
1
其中會(huì)包括圖片本身的寬高，data-original為原圖url。
發(fā)現(xiàn)對(duì)于超出頁面顯示寬度的大圖，會(huì)存在變形的問題，如1200×848的圖(文章地址)，自適應(yīng)會(huì)顯示成802×848的尺寸：
這里為了不產(chǎn)生變形，得在加載之后，給圖片增加樣式 height: auto; 防止變形。這里是使用增加class的方法，同時(shí)將fadeIn的效果用CSS3的形式加入(js插件本身支持動(dòng)畫，但是CSS3動(dòng)畫性能更好)。代碼如下：
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){
// 不能設(shè)置否則圖像 未加載時(shí)寬高比1:1 不設(shè)置大圖會(huì)不正常比例
// 所以在lazyload之后手動(dòng)加上
// 同時(shí)結(jié)合CSS3處理fadeIn動(dòng)畫
$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;
}
效果圖
移動(dòng)端
在移動(dòng)端中，文章圖片的尺寸往往大于屏幕寬度，圖片加載完成后會(huì)發(fā)生抖動(dòng)。
在圖片加載之前，得對(duì)圖片設(shè)置寬高，而圖片的寬高得根據(jù)不同設(shè)備的分辨率來處理，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');
// 設(shè)置圖片樣式
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',// 圖片的真實(shí)url屬性
placeholder_data_img:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQzA1MTVGNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDQzA1MTYwNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNDMDUxNUQ2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNDMDUxNUU2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6p+a6fAAAAD0lEQVR42mJ89/Y1QIABAAWXAsgVS/hWAAAAAElFTkSuQmCC',
// 圖片加載完畢時(shí)回調(diào)
load:function($element,elements_left,options){
setLazyloadImgStyle($element,'auto','auto');
}
});
}
imgInit();
效果圖
總結(jié)
以上是生活随笔為你收集整理的lazyload.css,图片加载优化及图片lazyload自适应 - 轩枫阁的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端入门之(vue图片加载框架一)
- 下一篇： 【用电脑最忌的18个小动作】