日常在業務中會經常使用到圖檔，而涉及到一些大圖的加載等待的時間較長，一般為了使用者更好的體驗，會使用一些不同的圖檔加載效果，比如以下幾種情況：
- 骨架屏：在頁面上用占位架構代替圖檔，展示出圖檔的大緻結構和區域，給使用者一種“正在加載”的視覺體驗。
- 進度條：用進度條的形式展示圖檔的加載進度，讓使用者能夠了解圖檔的加載情況。
- 旋轉動畫：使用旋轉的圖示或者動畫展示圖檔正在加載的狀态，給使用者一個視覺上的回報。
- 模糊淡入：先展示一個高斯模糊的小圖或者低分辨率的圖檔，等大圖加載完成後再替換成高清的圖檔。
當然每種情況都有對應的利與弊，所适用的場景也有所不同，今天看到一個很有創意的圖檔加載效果，針對一些特定的場景和圖檔内容效果感覺很不錯。以下是加載的效果圖：
「注意：以下本文讨論的加載效果不太适用于圖檔的第一次加載，隻是一種互動效果供參考」
整體的加載效果就是圖檔被橫向拉伸了一樣，随着加載的過程圖檔内容逐漸顯示出來，這對于一些圖檔背景中包含純色的情況下的效果更好，因為純色部分不管怎麼拉伸也是純色，隻有其他顔色在拉伸的過程中會交織在一起，随着加載的過程逐漸看到廬山真面目，不得不說這是一個不錯的互動的效果。
image-rendering: pixelated
這就是今天的主角，image-rendering: pixelated 是一種 CSS 屬性，用于控制圖像在縮放或拉伸時的顯示方式。設定為 pixelated 後，浏覽器會以最接近原始圖像的方式呈現縮放後的圖像，使得圖像看起來像是由像素點組成的。這種方式與傳統的平滑縮放方式不同，可以更好地展現像素風格的圖像，例如像素藝術作品、遊戲素材等。簡單來說這個 pixelated 可以「讓圖檔變成像素風，也就是馬賽克的效果」。
image-rendering 屬性可以控制圖像在縮放或拉伸時的顯示方式，常見的屬性值有以下幾種：
- auto: 預設值，浏覽器會根據具體情況自動選擇合适的顯示方式進行呈現。
- crisp-edges: 将圖像呈現為銳利的邊緣，效果類似于将圖像強行放大或縮小到整數像素的尺寸。
- pixelated: 以原始圖像最接近的方式呈現縮放後的圖像，使得圖像看起來像是由像素點組成的。
今天主要介紹的是 pixelated，簡單實用比如給一下圖檔設定 pixelated 後的效果和原圖對比就可以清晰的看到馬賽克像素化的效果。
.pixelated {
image-rendering: pixelated;
}
tips: 要達到馬賽克效果前需要将圖檔放大至模糊的效果才會生效，如果本質是清晰的圖檔是無法生效的，這裡是将正常的圖檔縮小再設定更大的寬高後進行設定 pixelated。
觀察這個效果和本文一開始的飛機加載效果之間似乎并沒有什麼明顯的聯系。這裡使用了一個巧妙的實作方式，我們使用的圖檔内容主要都是橫向排列的，從左到右逐漸加載。仔細觀察可以發現，加載過渡區域的内容是基于目前縱向切面的像素點顔色值計算的。當我們不斷向右移動時，對應像素點的顔色值也會不斷變化，進而導緻加載橫條的顔色内容不斷變化。下面這張示例圖表現了這種效果更加明顯：
這裡其實是用到了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 即可産生動起來的效果，但這時候僞元素的色值是基于圖檔最左側的色值不會有變化，如下所示：
是以這個時候還需要增加另一個屬性 background-position 上場，要讓僞元素運動時對應上圖檔上的縱向色值，是以增加 background-position 和 left 的數值一樣，這裡需要注意的是我們是要将僞元素的背景向左移動，是以是設定負數，代碼如下：
.thing:after {
background-position: -300px 0;
}
.thing:hover:after{
background-position: -720px 0；
}
最後來看一下不同的圖檔遇上後的新奇效果，當下面這種圖檔遇上從左往右逐漸顯示的效果後會産生另一種不錯的感覺。
使用 pixelated 後的效果，本來界面上的曲線變成了直線逐漸延伸顯示。
這個蜥蜴使用了純色背景，是以在加載過程中拉伸是後也是純色的，那麼就剩下主體内容在發生變化，這也是一種不錯的體驗效果。
碼上掘金線上體驗：
https://code.juejin.cn/pen/7225892695250567223
參考：https://codepen.io/andyfitz/pen/XWxWgyY
最後
本文介紹了一個有趣的圖檔加載效果，主要使用了 image-rendering: pixelated 配合 background-position 産生的過渡加載效果。 加載效果不太适用于圖檔的第一次加載，隻是一種互動效果供參考，針對不同的圖檔會産生别樣的加載風格，比如上面的直線内容加載變為曲線，純色背景的内容的加載隻會有主體内容發生變化，有興趣的可以嘗試其他内容的圖檔也許你會發現新大陸。
看完本文如果覺得有用，記得點個贊支援，收藏起來說不定哪天就用上啦～
「專注前端開發，分享前端相關技術幹貨，公衆号：南城大前端（ID: nanchengfe）」