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