日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
圖片懶加載從簡單到復雜

圖片懶加載是一個很重要的前端性能優(yōu)化手段。這篇文章將從懶加載的最簡單場景開始介紹，逐步增加復雜度，希望能講清楚常見的圖片懶加載場景及在該場景下對應的解決辦法，也希望對你有所幫助。

成都創(chuàng)新互聯(lián)網(wǎng)絡公司擁有十余年的成都網(wǎng)站開發(fā)建設經(jīng)驗，1000多家客戶的共同信賴。提供網(wǎng)站設計制作、做網(wǎng)站、網(wǎng)站開發(fā)、網(wǎng)站定制、買鏈接、建網(wǎng)站、網(wǎng)站搭建、自適應網(wǎng)站建設、網(wǎng)頁設計師打造企業(yè)風格，提供周到的售前咨詢和貼心的售后服務

為什么要做圖片的懶加載

假設在用戶訪問某個頁面時就加載這個頁面全部的圖片（即使這些圖片并不處在用戶的當前的視窗中），在弱網(wǎng)環(huán)境或者網(wǎng)速較慢的環(huán)境下，這些“冗余”圖片的下載會占用用戶本來就非常有限的帶寬，傷害用戶體驗（比如影響其他資源的下載）。所以對于網(wǎng)站的圖片，理想的做法是懶加載（按需加載）。

圖片懶加載的原理

在瀏覽器內(nèi)部對于各種資源有著一套自己的優(yōu)先級定義，瀏覽器會優(yōu)先加載優(yōu)先級高的資源。

如果我們不去進行圖片的懶加載，默認情況下，資源的priority如下。

這些優(yōu)先級標記為high的圖片會占用其他資源的下載帶寬，可能會造成某些比較關鍵的資源（比如xhr call）加載緩慢，拖慢頁面速度。

圖片懶加載的簡單實現(xiàn)

圖片懶加載的思路一般時當頁面加載時加載一個尺寸很小的占位圖片（1kb以下），然后再通過js選擇性的去加載真正的圖片。

一個最簡單的的實現(xiàn)如下： 

 
 
 
 
    
  
  
  
  
  1.     
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. // index.css  
    2. 
  
  
  
  
  2.   img[src] {  
    3. 
  
  
  
  
  3.       filter: blur(0.2em);  
    4. 
  
  
  
  
  4.   }  
    5. 
  
  
  
  
  5.   img {  
    6. 
  
  
  
  
  6.       filter: blur(0em);  
    7. 
  
  
  
  
  7.       transition: filter 0.5s;  
    8. 
  
  
  
  
  8.   }  
    9. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. (function lazyLoad(){  
    2. 
  
  
  
  
  2.     const imageToLazy = document.querySelectorAll('img[src]');  
    3. 
  
  
  
  
  3.     const loadImage = function (image) {  
    4. 
  
  
  
  
  4.         image.setAttribute('src', image.getAttribute('src'));  
    5. 
  
  
  
  
  5.         image.addEventListener('load', function() {  
    6. 
  
  
  
  
  6.             image.removeAttribute("src");  
    7. 
  
  
  
  
  7.         }) 
    8. 
  
  
  
  
  8.     }  
    9. 
  
  
  
  
  9.     imageToLazy.forEach(function(image){  
    10. 
  
  
  
  
  10.         loadImage(image);  
    11. 
  
  
  
  
  11.     })  
    12. 
  
  
  
  
  12. })() 
    13.

通過懶加載之后，資源優(yōu)先級如下。

圖片懶加載的進階實現(xiàn)–滾動加載

上面的方案并不完美，對于用戶來說，不在視窗中的圖片可能根本不是用戶當前關心的圖片，所以我們可以讓這些圖片出現(xiàn)在用戶視窗中再進行加載。

運用Intersection Observer 我們可以做到當圖片滾動到視窗后再加載該圖片。 

 
 
 
 
    
  
  
  
  
  1. (function lazyLoad(){  
    2. 
  
  
  
  
  2.     const imageToLazy = document.querySelectorAll('img[src]');  
    3. 
  
  
  
  
  3.     const loadImage = function (image) {  
    4. 
  
  
  
  
  4.         image.setAttribute('src', image.getAttribute('src'));  
    5. 
  
  
  
  
  5.         image.addEventListener('load', function() {  
    6. 
  
  
  
  
  6.             image.removeAttribute("src");  
    7. 
  
  
  
  
  7.         })  
    8. 
  
  
  
  
  8.     }  
    9. 
  
  
  
  
  9.     const intersectionObserver = new IntersectionObserver(function(items, observer) {  
    10. 
  
  
  
  
  10.         items.forEach(function(item) {  
    11. 
  
  
  
  
  11.             if(item.isIntersecting) {  
    12. 
  
  
  
  
  12.                 loadImage(item.target);  
    13. 
  
  
  
  
  13.                 observer.unobserve(item.target);  
    14. 
  
  
  
  
  14.             }  
    15. 
  
  
  
  
  15.         });  
    16. 
  
  
  
  
  16.     });  
    17. 
  
  
  
  
  17.     imageToLazy.forEach(function(image){  
    18. 
  
  
  
  
  18.         intersectionObserver.observe(image);  
    19. 
  
  
  
  
  19.     })  
    20. 
  
  
  
  
  20. })() 
    21.

上面的這些demo都在https://github.com/hateonion/lazy-load 這個repo里面。

如何選擇合適的Placeholder圖片

在上面的demo中我們使用了placeholder圖片，實際上，圖片所占的位置是否確定對于我們選擇placeholder圖片有著很大的影響。

圖片尺寸已知

圖片尺寸已知出現(xiàn)的場景一般是博文的題圖或者網(wǎng)站中一些固定尺寸的thumbnail，這些圖的尺寸一般固定且一般不會發(fā)生改變。對于這種場景，我們可以加載對應尺寸的placeholder圖片（如上一節(jié)的demo）。我們可以自己裁剪對應尺寸的的placeholder圖片或者使用類似http://placeholder.com/ 這樣的服務來獲取placeholder圖片。

圖片尺寸未知

圖片尺寸未知的情況下一般我們需要生成對應的thumbnail然后去加載我們生成的thumbnail去做placeholder。為了生成這些thumbnail你可以調(diào)用imagemagick或者調(diào)用一些在線的圖片分割服務（比如七牛）

懶加載防止布局抖動

在圖片懶加載時，由于圖片的尺寸不定，瀏覽器難以計算需要給圖片預留出的位置。所以當圖片加載完成后會出現(xiàn)網(wǎng)頁布局的抖動。

(image from From http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/)

即使我們選擇的placeholder很小，可以在毫秒級別完成下載，用戶可能意識不到布局的抖動。但是在一些性能比較差的設備上，這種布局的抖動還是會一定程度上影響用戶的體驗。為了完全避免布局閃動，我們可以采用aspect ratio boxes 的技術來制作一個占位用的元素。 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.     
    3.
  
  • .lazy-load__container{  
  •     position: relative;  
  •     display: block;  
  •     height: 0;  
  • }  
  • .lazy-load__container.feature {  
  •     // feature image 的高寬比設置成42.8%  
  •     // 對于其他圖片 比如 post圖片，高寬比可能會不同，可以使用其他css class去設置  
  •     padding-bottom: 42.8%;  
  • }  
  • .lazy-load__container img {  
  •     position: absolute;  
  •     top:0;  
  •     left:0;  
  •     height: 100%;  
  •     width: 100%;  
  • } 

    • 結(jié)果

    上面這個實現(xiàn)的原理其實很簡單，由于 padding-bottom (或者 padding-top)聲明為百分比時是根據(jù)元素生成的box的 width 去計算百分比的，所以我們通過padding-bottom去聲明一個對應高寬比的container。而這個container的具體尺寸會由尺寸確定的外層元素確定，但是高寬比始終保持一致。

    而圖片的尺寸設置成100%container的尺寸保證圖片始終和container的尺寸保持一致。

    需要注意的是上面這個方法并不能適配圖片比例不一致的網(wǎng)站（比如本站），不過好在，為了用戶體驗，現(xiàn)在絕大多數(shù)網(wǎng)站的圖片比例都有明確的要求，絕大多數(shù)情況下我們只適配保證網(wǎng)站常用的的幾種圖片寬高比例即可。

    像Medium一樣懶加載圖片

    Medium的懶加載圖片的體驗相信去 Medium 讀過文章的同學都體驗過了，可以說是非常的流暢。而其背后的技術其實也就是我們上面講到的幾種技術的組合。

    1.  使用 aspect ratio box 創(chuàng)建占位元素。
    2.  在html解析時只加載一個小尺寸的圖片，并且添加blur效果。
    3.  最后使用js選擇性的加載真實圖片。

    Demo 如下 codePen by José M. Pérez

    總結(jié)

    1.  懶加載用戶當前視窗中的圖片可以提升頁面的加載性能。
    2.  懶加載的思路是在html解析時先加載一個placeholder圖片，最后再用js選擇性的加載真實圖片。
    3.  如果需要滾動加載可以使用 Intersection Observer 。
    4.  對于固定尺寸和不定尺寸的圖片，我們可以選擇不同的服務去或者placeholder圖片。
    5.  對于圖片尺寸不確定引起的布局抖動問題我們可以使用 aspect ratio box 來解決。 

    新聞名稱：圖片懶加載從簡單到復雜
    轉(zhuǎn)載源于：http://www.dlmjj.cn/article/cdjgesc.html