日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 

  
  

  
  
        id="512a"  
  
  
        class="graf--figure graf--layoutCroppedHeightPreview graf-after--h3" 
  
  
> 
  
  
     
  
  
        
  
  
             style="padding-bottom: 30%;" 
  
  
        >

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

那么，這個圖片的逐步加載過程具體是什么樣的呢?

1. 渲染一個 div 容器，這個容器就是用來顯示最終展示給用戶的圖片的。通過對容器設(shè)置一個百分比的 padding-bottom 來讓其比例和大小與最終圖片的比例和大小相同，這樣，就能避免圖片加載出來的時候?qū)е碌捻撁娴闹嘏?
2. 使用 img 標(biāo)簽來加載一張原圖質(zhì)量的 10% ~ 20% 左右的圖片，這張圖片的質(zhì)量很低，而且很小，所以可以馬上加載出來;
3. 一旦小圖加載完成，就開始使用 canvas 來進(jìn)行繪制，添加模糊效果，同時，開始請求最終要加載的大圖;
4. 當(dāng)最終的大圖也加載完成之后，顯示大圖，隱藏掉 canvas。

以上就是 Medium 的做法。

我們可以自己來實現(xiàn)這個效果，實現(xiàn)過程如下：

1. 渲染一個容器，保持與原圖的比例和尺寸相同，填充一個較淺的背景色;
2. 先加載小圖，同時使用模糊效果;
3. 小圖加載完成，開始請求大圖;
4. 大圖加載完成，顯示大圖，隱藏小圖。

所以，綜合來看，其實并不復(fù)雜。

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

 
 

  
  

  
  
        class="blur-img-container" 
  
  
        data-real-width="1174" 
  
  
        data-real-height="670" 
  
  
        data-src="images/sm2.jpeg" 
  
  
        src="https://cdn-images-1.medium.com/max/2000/1*0WwtDkE1q6HGZwD6Kn9SuQ.jpeg" 
  
  
>  
 
 

其中各個參數(shù)代表的含義是：

• data-real-width: 大圖的寬度
• data-real-height: 大圖的高度
• data-src: 小圖的 URL
• src: 大圖的 URL

同時，我們需要定義一些 CSS 的 class 來對大圖和小圖進(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; 
  
  
}  
 
 

然后，我們的重點在于 JavaScript 的處理。

• 需要動態(tài)的設(shè)置每個圖片的容器的 padding-bottom 以防止頁面發(fā)生重排;
• 通過 image 的 onload 事件來控制其樣式和進(jìn)度

***點，動態(tài)設(shè)置我們的容器的 padding-bottom?？梢酝ㄟ^計算寬高比然后換算成百分比：

 
 

  
  
elem.style.paddingBottom = `${(realHeight / realWidth) * 100}%`; 
 
 

第二點，使用圖像的 onload 事件來控制加載的進(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'); 
  
  
}; 
  
  
 
  
  
// 將大圖添加到頁面中 
  
  
elem.appendChild(realImg);  
 
 

其實，只要把上面兩點主要的功能做好了，我們的這個效果基本上就實現(xiàn)了。

可以通過我的 GitHub Repo 來查看完整的源代碼和例子 blur-image。

同時，我將這個小功能封裝成了一個 package，需要的朋友可以通過 npm install blur-image 或者 bower install blur-image 進(jìn)行安裝和使用。具體的安裝和使用方法可以查看文檔。