圖片預加載和懶加載

對於前端性能來講，圖片是一個過不去的坎，又想能頁面美觀，又想頁面響應速度快，那麼這時候就有了兩個技術，圖片懶加載和預加載。在這邊我只介紹一些方法和原理，不具體把方法的代碼貼出來。

懶加載：在須要顯示圖片的時候纔去加載圖片。

預加載：在還沒顯示的時候就加載圖片。

在說預加載和懶加載以前。咱們先說說圖片加載的時機。

一、設置了display: none的img標籤和元素背景圖片，不會渲染可是會加載。

二、父元素div設置了display: none，那麼這個父元素裏面的子元素img標籤會加 載,父元素裏面子元素背景圖片不會加載

三、重複或者加載過的圖片只會加載一次

四、不存在元素的背景圖片不會加載

五、僞類，好比hover，在觸發後纔會加載

懶加載

好比咱們首屏有二十張圖片，可是打開頁面的時候只須要顯示輪播圖和第一張圖片，那麼另外的圖片是否是能夠在須要顯示的輪播圖和顯示的第一張圖片加載完成後慢慢去加載。這就是懶加載的原理。

懶加載方法

一、使用定時器或者計時器

在打開頁面須要顯示的圖片咱們優先加載，而後寫一個定時器或者計時器去請求以後須要用到的圖片。

二、條件加載，一些圖片是某些條件觸發才顯示的，也能夠在顯示頁面的時候先不加 載，直到須要顯示的時候去加載圖片。

三、可視區域加載

說白了就是監聽滾動條，滾動條滾動到必定位置的時候就去加載立刻要顯示的圖片，要稍微提早一點去加載。

預加載

雖然頁面還不須要顯示圖片，可是咱們已經把這些圖片加載下來了，只是不顯示這些圖片，咱們都知道瀏覽器是會緩存請求過的圖片，預加載就是基於這個原理。

預加載方法

一、使用css背景圖片

咱們寫一些樣式，而後把圖片的地址放到背景圖片裏面，讓圖片隱藏，也能夠設置背景圖片位置偏移出這個頁面。瀏覽器解析到這些樣式的時候就會去加載這些圖片，而後等你須要顯示的時候瀏覽器會從緩存裏面取，就不須要再去請求。可是這個會形成解析過程當中增長了解析時間。

二、使用JavaScript配合css背景圖片

原理就是在DOM和CSS都加載完了，就是在ready方法裏面給這些樣式添加背景圖片，這樣就不會形成解析時間邊長的問題。

三、用JavaScript建立圖片

建立一個對象，就是new Image()，而後給這個對象賦值src，也可使用數組去實現須要加載不少圖片的時候。

四、使用Ajax

就是發起一個get請求，地址是這張圖片，由於請求後瀏覽器會緩存，這張圖片就預加載到了本地。

其實懶加載和預加載都是須要看須要決定的，好比須要幾十張圖片顯示，可是有優先順序，就使用懶加載，若是是隻有幾張小圖，頁面渲染速度也夠快，想要交互的時候響應快速，使用預加載。

歡迎關注Coding我的筆記 公衆號