真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

可以看到，Medium 為每一張圖片都設(shè)置了這么長(zhǎng)的一段  HTML。這樣做的目的就是為了讓這個(gè)圖片的逐步加載過(guò)程能夠平滑如一，同時(shí)還能在一定程度上提升用戶體驗(yàn)。就算圖片沒(méi)有加載出來(lái)，顯示給用戶的是一個(gè)高斯模糊的圖片，其實(shí)也不失美感。

那么，這個(gè)圖片的逐步加載過(guò)程具體是什么樣的呢?

1. 渲染一個(gè) div 容器，這個(gè)容器就是用來(lái)顯示最終展示給用戶的圖片的。通過(guò)對(duì)容器設(shè)置一個(gè)百分比的 padding-bottom  來(lái)讓其比例和大小與最終圖片的比例和大小相同，這樣，就能避免圖片加載出來(lái)的時(shí)候?qū)е碌捻?yè)面的重排;

2. 使用 img 標(biāo)簽來(lái)加載一張?jiān)瓐D質(zhì)量的 10% ~ 20% 左右的圖片，這張圖片的質(zhì)量很低，而且很小，所以可以馬上加載出來(lái);

3. 一旦小圖加載完成，就開(kāi)始使用 canvas 來(lái)進(jìn)行繪制，添加模糊效果，同時(shí)，開(kāi)始請(qǐng)求最終要加載的大圖;

4. 當(dāng)最終的大圖也加載完成之后，顯示大圖，隱藏掉 canvas。

以上就是 Medium 的做法。

我們可以自己來(lái)實(shí)現(xiàn)這個(gè)效果，實(shí)現(xiàn)過(guò)程如下：

1. 渲染一個(gè)容器，保持與原圖的比例和尺寸相同，填充一個(gè)較淺的背景色;

2. 先加載小圖，同時(shí)使用模糊效果;

3. 小圖加載完成，開(kāi)始請(qǐng)求大圖;

4. 大圖加載完成，顯示大圖，隱藏小圖。

所以，綜合來(lái)看，其實(shí)并不復(fù)雜。

首先，我們可以把大圖和小圖的 URL 和尺寸都存起來(lái)，通過(guò)標(biāo)簽的 data 屬性去動(dòng)態(tài)獲取。所以，我們的 HTML 可以像下面這樣寫(xiě)：

其中各個(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。

到此，相信大家對(duì)“css怎么使用高斯模糊的效果逐步加載圖片”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！