摘要:我們可以自己來(lái)實(shí)現(xiàn)這個(gè)效果,實(shí)現(xiàn)過(guò)程如下渲染一個(gè)容器,保持與原圖的比例和尺寸相同,填充一個(gè)較淺的背景色先加載小圖,同時(shí)使用模糊效果小圖加載完成,開始請(qǐng)求大圖大圖加載完成,顯示大圖,隱藏小圖。
用過(guò) Medium 的用戶不會(huì)不記得它的圖片加載方式——純色-高斯模糊-加載完成并顯示。
這是一種很優(yōu)雅的圖片預(yù)加載的方式(因?yàn)?Medium 的圖片質(zhì)量都很高,如果全部一下加載的話,需要的時(shí)間難以想象,所以,這是一種很棒的做法)。從第一次打開 Medium 這個(gè)網(wǎng)站開始,我就被這種技術(shù)給吸引住了——好吧,直到今天才去研究它。
在 Medium 網(wǎng)站,打開任何一篇文章,然后,我們來(lái) inspect 一下:
可以看到,Medium 為每一張圖片都設(shè)置了這么長(zhǎng)的一段 HTML。這樣做的目的就是為了讓這個(gè)圖片的逐步加載過(guò)程能夠平滑如一,同時(shí)還能在一定程度上提升用戶體驗(yàn)。就算圖片沒(méi)有加載出來(lái),顯示給用戶的是一個(gè)高斯模糊的圖片,其實(shí)也不失美感。
那么,這個(gè)圖片的逐步加載過(guò)程具體是什么樣的呢?
渲染一個(gè) div 容器,這個(gè)容器就是用來(lái)顯示最終展示給用戶的圖片的。通過(guò)對(duì)容器設(shè)置一個(gè)百分比的 padding-bottom 來(lái)讓其比例和大小與最終圖片的比例和大小相同,這樣,就能避免圖片加載出來(lái)的時(shí)候?qū)е碌捻?yè)面的重排;
使用 img 標(biāo)簽來(lái)加載一張?jiān)瓐D質(zhì)量的 10% ~ 20% 左右的圖片,這張圖片的質(zhì)量很低,而且很小,所以可以馬上加載出來(lái);
一旦小圖加載完成,就開始使用 canvas 來(lái)進(jìn)行繪制,添加模糊效果,同時(shí),開始請(qǐng)求最終要加載的大圖;
當(dāng)最終的大圖也加載完成之后,顯示大圖,隱藏掉 canvas。
以上就是 Medium 的做法。
我們可以自己來(lái)實(shí)現(xiàn)這個(gè)效果,實(shí)現(xiàn)過(guò)程如下:
渲染一個(gè)容器,保持與原圖的比例和尺寸相同,填充一個(gè)較淺的背景色;
先加載小圖,同時(shí)使用模糊效果;
小圖加載完成,開始請(qǐng)求大圖;
大圖加載完成,顯示大圖,隱藏小圖。
所以,綜合來(lái)看,其實(shí)并不復(fù)雜。
首先,我們可以把大圖和小圖的 URL 和尺寸都存起來(lái),通過(guò)標(biāo)簽的 data 屬性去動(dòng)態(tài)獲取。所以,我們的 HTML 可以像下面這樣寫:
其中各個(gè)參數(shù)代表的含義是:
data-real-width: 大圖的寬度
data-real-height: 大圖的高度
data-src: 小圖的 URL
src: 大圖的 URL
同時(shí),我們需要定義一些 CSS 的 class 來(lái)對(duì)大圖和小圖進(jìn)行處理:
.blur-img-container { position: relative; background: #eeeeee; background-size: cover; overflow: hidden; } .blur-img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.4s ease-in-out; } .blur-img-container .thumb-loaded { opacity: 1; filter: blur(10px); transform: scale(1); } .blur-img-container .large-loaded { opacity: 1; } .blur-img-container .thumb-hidden { opacity: 0; }
然后,我們的重點(diǎn)在于 JavaScript 的處理。
需要?jiǎng)討B(tài)的設(shè)置每個(gè)圖片的容器的 padding-bottom 以防止頁(yè)面發(fā)生重排;
通過(guò) image 的 onload 事件來(lái)控制其樣式和進(jìn)度
第一點(diǎn),動(dòng)態(tài)設(shè)置我們的容器的 padding-bottom。可以通過(guò)計(jì)算寬高比然后換算成百分比:
elem.style.paddingBottom = `${(realHeight / realWidth) * 100}%`;
第二點(diǎn),使用圖像的 onload 事件來(lái)控制加載的進(jìn)度:
let thumb = new Image(); thumb.src = thumbSrc; thumb.onload = () => { // 小圖加載完成,顯示小圖,設(shè)置樣式 setStyle(thumb, "thumb-loaded"); }; elem.appendChild(thumb); let realImg = new Image(); realImg.src = lgSrc; realImg.onload = () => { // 大圖加載完成,顯示大圖,隱藏小圖 setStyle(realImg, "large-loaded"); setStyle(thumb, "thumb-hidden"); }; // 將大圖添加到頁(yè)面中 elem.appendChild(realImg);
其實(shí),只要把上面兩點(diǎn)主要的功能做好了,我們的這個(gè)效果基本上就實(shí)現(xiàn)了。
可以通過(guò)我的 GitHub Repo 來(lái)查看完整的源代碼和例子 blur-image。
同時(shí),我將這個(gè)小功能封裝成了一個(gè) package,需要的朋友可以通過(guò) npm install blur-image 或者 bower install blur-image 進(jìn)行安裝和使用。具體的安裝和使用方法可以查看文檔。
參考鏈接
How Medium does progressive image loading
The “Blur Up” Technique for Loading Background Images
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80218.html
摘要:我們可以自己來(lái)實(shí)現(xiàn)這個(gè)效果,實(shí)現(xiàn)過(guò)程如下渲染一個(gè)容器,保持與原圖的比例和尺寸相同,填充一個(gè)較淺的背景色先加載小圖,同時(shí)使用模糊效果小圖加載完成,開始請(qǐng)求大圖大圖加載完成,顯示大圖,隱藏小圖。 用過(guò) Medium 的用戶不會(huì)不記得它的圖片加載方式——純色-高斯模糊-加載完成并顯示。 這是一種很優(yōu)雅的圖片預(yù)加載的方式(因?yàn)?Medium 的圖片質(zhì)量都很高,如果全部一下加載的話,需要的時(shí)間難...
閱讀 3245·2023-04-26 01:31
閱讀 1892·2023-04-25 22:08
閱讀 3430·2021-09-01 11:42
閱讀 2823·2019-08-30 12:58
閱讀 2165·2019-08-29 18:31
閱讀 2429·2019-08-29 17:18
閱讀 3064·2019-08-29 13:01
閱讀 2552·2019-08-28 18:22