【web前端優化之圖片模糊到清晰】看我QQ空間如何顯示相片

前言

此篇文章估計不會太長，有移除首頁的風險，可是老夫（稱老夫是由於咱們真正的葉小釵其實都100多歲啦）是不會怕滴。因此，我來了喲！

題外話：今天咱們一塊兒還看了一道前端的面試題，然後我原本還想多找幾道來作作，可是沒找到什麼合適的，各位有什麼好的前端面試題請給我留言哦，咱們一塊兒來分析面試題進步喲！

前端時間，我與咱們的產品有一次討論，是針對圖片壓縮的，由於我對圖片或者說PS這塊是個小白，因此當時作了一個廣告圖片有100來k也直接給傳上去了，結果被咱們的同事搞起來一壓縮，便只有50多k了，這次交流對圖片壓縮這塊有了一點點心得，而且爲第二次交流埋下伏筆，第二次即是圖片由模糊變清晰的研究了。

網頁圖片格式

此處我先對咱們的圖片格式作一下普及吧，參考：

【整理】詳說JPG,GIF及PNG各種型的圖片格式

GIF

透明類型，能夠全透明或者全不透明，半透明這種事情就不要找他了，而且這個傢伙能夠作動畫哦

gif是一種無損耗的圖片格式

gif採用lzw算法進行壓縮，當壓縮gif過程當中像素由上到下進行壓縮，也就是說橫向的gif圖片比縱向的小(500*10比10*500小)

gif支持可選擇性的間隔漸進顯示

JPEG

不支持透明

不支持動畫

該圖片很是容易損耗

支持隔行漸進顯示（ie不支持，ie會再整個圖片信息徹底到達後再顯示）

jepg尤爲適合web上面的攝影圖片和數字相冊

PNG

支持各類透明，但在IE6下有bug須要使用濾鏡處理

不支持動畫

任何操做都不會損耗其質量

支持間隔漸進加強，但會形成圖片尺寸變大：

png8(布爾透明)
至關於靜態gif，只有256色，支持索引透明，就是指定一個像素點不是透明

png8(alpha透明)
可指定像素點的透明度，例如50%透明度
優勢在於比png24/32小，效果同樣，缺點爲ie6不支持

png24
不透明，顏色不少不止256色，PS導出的png24事實上爲png32

png32
和PS裏面的PSD同樣，包含圖層和通道信息

---

以上是關於圖片的一些信息，咱們大概瞭解下即是，其中我要說一說其中的PNG，特別是交錯png

PNG交錯在使用瀏覽器欣賞該圖片時就會以由模糊逐漸轉爲清晰的效果方式漸漸顯示出來。PNG先進的交錯式方法，使圖像得以水平及垂直方式顯像在屏幕上，加快了下載的速度，做用：交錯可以使下載時間感受更短，並使瀏覽者確信正在進行下載。PNG無交錯、不交錯就沒這個做用。

圖片的顯示

咱們知道img標籤在dom加載時候是不會加載的，而是在dom結構所有出來後並造成了渲染樹（佈局結束），纔開始加載。

而其加載順序也是從上而下的加載，意思是圖片咱們是先看到上面再看到下面，可是很明顯這不是一個好的顯示方式，咱們如果一開始能夠看到模糊的圖形而後再慢慢變清晰是否是好不少呢？

確定好不少啦。。。

因而咱們討論到如何實現，可是就說到了交錯PNG，我當時雖然信了，由於我對此不太瞭解，可是下來思考下卻感受有點不對勁！

用戶的疑惑

如今咱們來想象下QQ空間的作法（這塊純粹瞎扯），我如今做爲一個用戶，我上傳圖片來了

① 我想將QQ空間做爲雲存儲的地方，上傳了我2M的畢業照

② 空間根據需求生成了一張縮略圖與一張大圖

③ 咱們首先看到縮略圖，然後看到大圖，點擊原圖時候便看到我最初2M的照片

以上是我覺得的邏輯，QQ空間是否是這個邏輯咱們不去關注他，由於站在用戶角度，我必定是想保留我最初的東西。

好了事到現在，QQ空間究竟怎麼作的呢？？？那個太複雜了，咱們也不去關注，我這裏說下我是怎麼作的。

實現圖片由模糊到清晰

咱們的相冊顯示通常是這個樣子的：

上面是縮略圖，下面是大圖，在這裏咱們其實能夠對其縮略圖作文章！！！

咱們在大圖顯示完以前能夠用縮略圖「代替」大圖嗎，來看看咱們的邏輯：

① 縮略圖在相冊上方，其最早加載，就算在下方，由於縮略圖尺寸很小加載十分迅速

② 最初將縮略圖放到大圖顯示位置，將其大小設置爲大圖大小（此尺寸有多種方法可獲取，好比上傳時候便計算結束）

② 將大圖佈局置於縮略圖前，由於縮略圖已經展現，可是由於過大而顯得有點模糊，但大圖慢慢加載其由上至下變得清晰給人一種模糊到清晰的錯覺

④ 流程結束

因而咱們來看看咱們的QQ空間吧，看以前咱們用限速工具，給咱們的火狐限速：

PS：限速後開空間巨慢。。。

怎麼樣，夠慢了的吧！

注意看其由上到下的變化哦，而後我這裏找出了證據

PS：我打開網上限制怎麼仍是很慢，看來是我網速慢的緣由啦。。。

請看我這邊用紅框圈着的三塊地方：

第一個爲相冊顯示的容器，relative定位的

第二個爲上面的小縮略圖，很小的那種哦：

看吧，這裏活生生的將人家扯那麼大。。。。。

第三個框即是主角，大圖啦：

結論

從其整個排布來看，與咱們思考的一致，他這樣作好處多多的有哦，好比咱們這裏上面的圖片導航：

咱們看到上面的縮略圖早就顯示出來了，點擊下一張的時候縮略圖會展現出來，不會出現空白的斷層，而後大圖慢慢的顯示讓用戶願意停在那裏。

結語

好啦，今天咱們研究了一道面試題，後面又研究了圖片由模糊到清晰的方案，如果您有更好的解決方案不要藏着哦！

好啦，如果你有好的web前端面試題也請留下，我最近在作這方面的整理，後面對各位也會有幫助滴，最後留一張老夫的玉照吧！