一個(gè)有趣的圖片加載效果，你學(xué)會(huì)了嗎？
日常在業(yè)務(wù)中會(huì)經(jīng)常使用到圖片，而涉及到一些大圖的加載等待的時(shí)間較長，一般為了用戶更好的體驗(yàn)，會(huì)使用一些不同的圖片加載效果，比如以下幾種情況：
- 骨架屏：在頁面上用占位框架代替圖片，展示出圖片的大致結(jié)構(gòu)和區(qū)域，給用戶一種“正在加載”的視覺體驗(yàn)。
- 進(jìn)度條：用進(jìn)度條的形式展示圖片的加載進(jìn)度，讓用戶能夠了解圖片的加載情況。
- 旋轉(zhuǎn)動(dòng)畫：使用旋轉(zhuǎn)的圖標(biāo)或者動(dòng)畫展示圖片正在加載的狀態(tài)，給用戶一個(gè)視覺上的反饋。
- 模糊淡入：先展示一個(gè)高斯模糊的小圖或者低分辨率的圖片，等大圖加載完成后再替換成高清的圖片。
當(dāng)然每種情況都有對(duì)應(yīng)的利與弊，所適用的場景也有所不同，今天看到一個(gè)很有創(chuàng)意的圖片加載效果，針對(duì)一些特定的場景和圖片內(nèi)容效果感覺很不錯(cuò)。以下是加載的效果圖：
「注意：以下本文討論的加載效果不太適用于圖片的第一次加載，只是一種交互效果供參考」
整體的加載效果就是圖片被橫向拉伸了一樣，隨著加載的過程圖片內(nèi)容逐漸顯示出來，這對(duì)于一些圖片背景中包含純色的情況下的效果更好，因?yàn)榧兩糠植还茉趺蠢煲彩羌兩?，只有其他顏色在拉伸的過程中會(huì)交織在一起，隨著加載的過程逐漸看到廬山真面目，不得不說這是一個(gè)不錯(cuò)的交互的效果。
image-rendering: pixelated
這就是今天的主角，image-rendering: pixelated 是一種 CSS 屬性，用于控制圖像在縮放或拉伸時(shí)的顯示方式。設(shè)置為 pixelated 后，瀏覽器會(huì)以最接近原始圖像的方式呈現(xiàn)縮放后的圖像，使得圖像看起來像是由像素點(diǎn)組成的。這種方式與傳統(tǒng)的平滑縮放方式不同，可以更好地展現(xiàn)像素風(fēng)格的圖像，例如像素藝術(shù)作品、游戲素材等。簡單來說這個(gè) pixelated 可以「讓圖片變成像素風(fēng)，也就是馬賽克的效果」。
image-rendering 屬性可以控制圖像在縮放或拉伸時(shí)的顯示方式，常見的屬性值有以下幾種：
- auto: 默認(rèn)值，瀏覽器會(huì)根據(jù)具體情況自動(dòng)選擇合適的顯示方式進(jìn)行呈現(xiàn)。
- crisp-edges: 將圖像呈現(xiàn)為銳利的邊緣，效果類似于將圖像強(qiáng)行放大或縮小到整數(shù)像素的尺寸。
- pixelated: 以原始圖像最接近的方式呈現(xiàn)縮放后的圖像，使得圖像看起來像是由像素點(diǎn)組成的。
今天主要介紹的是 pixelated，簡單實(shí)用比如給一下圖片設(shè)置 pixelated 后的效果和原圖對(duì)比就可以清晰的看到馬賽克像素化的效果。
.pixelated {
image-rendering: pixelated;
}tips: 要達(dá)到馬賽克效果前需要將圖片放大至模糊的效果才會(huì)生效，如果本質(zhì)是清晰的圖片是無法生效的，這里是將正常的圖片縮小再設(shè)置更大的寬高后進(jìn)行設(shè)置 pixelated。
觀察這個(gè)效果和本文一開始的飛機(jī)加載效果之間似乎并沒有什么明顯的聯(lián)系。這里使用了一個(gè)巧妙的實(shí)現(xiàn)方式，我們使用的圖片內(nèi)容主要都是橫向排列的，從左到右逐漸加載。仔細(xì)觀察可以發(fā)現(xiàn)，加載過渡區(qū)域的內(nèi)容是基于當(dāng)前縱向切面的像素點(diǎn)顏色值計(jì)算的。當(dāng)我們不斷向右移動(dòng)時(shí)，對(duì)應(yīng)像素點(diǎn)的顏色值也會(huì)不斷變化，從而導(dǎo)致加載橫條的顏色內(nèi)容不斷變化。下面這張示例圖表現(xiàn)了這種效果更加明顯：
這里其實(shí)是用到了scale進(jìn)行放大，但是只放大了X軸，所有效果就是被橫向拉的很長。
transform: scale(6000, 1);那么這段代碼怎么應(yīng)用生效呢？
這里需要再引入一個(gè)知識(shí)點(diǎn)，以下引用來源于 mozilla。
CSS 屬性 image-rendering 用于設(shè)置圖像縮放算法。它適用于元素本身，適用于元素其他屬性中的圖像，也應(yīng)用于子元素。
重點(diǎn)是也應(yīng)用于子元素。所以我們基于當(dāng)前的圖片元素?cái)U(kuò)展一個(gè)偽元素，在偽元素進(jìn)行 pixelated 屬性設(shè)置，核心代碼如下：
.thing::after {
left: 300px;
transform-origin: 0 0;
transform: scale(6000, 1);
image-rendering: pixelated;
transition: all 2s cubic-bezier(.5,0,0,1) ;
}
.thing:hover::after{
left: 720px;
}偽元素默認(rèn)設(shè)置了 300px 的偏移量，鼠標(biāo)懸停時(shí)設(shè)置為 720px，再配合 transition 即可產(chǎn)生動(dòng)起來的效果，但這時(shí)候偽元素的色值是基于圖片最左側(cè)的色值不會(huì)有變化，如下所示：
所以這個(gè)時(shí)候還需要增加另一個(gè)屬性 background-position 上場，要讓偽元素運(yùn)動(dòng)時(shí)對(duì)應(yīng)上圖片上的縱向色值，所以增加 background-position 和 left 的數(shù)值一樣，這里需要注意的是我們是要將偽元素的背景向左移動(dòng)，所以是設(shè)置負(fù)數(shù)，代碼如下：
.thing:after {
background-position: -300px 0;
}
.thing:hover:after{
background-position: -720px 0；
}最后來看一下不同的圖片遇上后的新奇效果，當(dāng)下面這種圖片遇上從左往右逐漸顯示的效果后會(huì)產(chǎn)生另一種不錯(cuò)的感覺。
使用 pixelated 后的效果，本來界面上的曲線變成了直線逐漸延伸顯示。
這個(gè)蜥蜴使用了純色背景，所以在加載過程中拉伸是后也是純色的，那么就剩下主體內(nèi)容在發(fā)生變化，這也是一種不錯(cuò)的體驗(yàn)效果。
在線體驗(yàn)：
https://code.juejin.cn/pen/7225892695250567223
參考：https://codepen.io/andyfitz/pen/XWxWgyY
最后
本文介紹了一個(gè)有趣的圖片加載效果，主要使用了 image-rendering: pixelated 配合 background-position 產(chǎn)生的過渡加載效果。 加載效果不太適用于圖片的第一次加載，只是一種交互效果供參考，針對(duì)不同的圖片會(huì)產(chǎn)生別樣的加載風(fēng)格，比如上面的直線內(nèi)容加載變?yōu)榍€，純色背景的內(nèi)容的加載只會(huì)有主體內(nèi)容發(fā)生變化，有興趣的可以嘗試其他內(nèi)容的圖片也許你會(huì)發(fā)現(xiàn)新大陸。
