意義：一個頁面有很多圖片，而首屏出現(xiàn)的圖片大概就一兩張，那么我們還要一次性把所有圖片都加載出來嗎？顯然這是愚蠢的，不僅影響頁面渲染速度，還浪費帶寬。這也就是們通常所說的首屏加載，技術上現(xiàn)實其中要用的技術就是圖片懶加載--到可視區(qū)域再加載。

在網(wǎng)頁中，常常需要用到圖片，而圖片需要消耗較大的流量。正常情況下，瀏覽器會解析整個HTML代碼，然后從上到下依次加載圖片標簽。如果頁面很長，隱藏在頁面下方的圖片其實已經被瀏覽器加載了。如果用戶不向下滾動頁面，就沒有看到這些圖片，相當于白白浪費了圖片的流量。

所以，淘寶、京東這些流量非常巨大的電商，商品介紹頁又必須有大量的圖片，因此，這些頁面的圖片都是“按需加載”，即用戶滾動頁面時顯示出來的時候才加載圖片。當網(wǎng)速非常快的時候，用戶并不能感知懶加載的動作，既省流量又不影響用戶瀏覽。

vue-lazyload的使用：首先要注冊vue-lazyload，然后才可以使用，在要使用懶加載技術的項目中安裝vue-lazyload,npm install vue-lazyload --save,或cnpm install vue-lazyload --save

安裝完畢之后在項目的主入口文件main.js里面引入

使用懶加載的組件

配置好路由

實現(xiàn)效果

首屏圖片在打開頁面時已經加載好，但是剩余的圖片并未加載，當插件檢測到用戶的向下滑動的行為時，再按需加載即將被用戶看到的圖片，在此之前，會顯示之前已經設定好的loading(加載中)的圖片。

另外：

注冊插件的時候，是可以傳入第二個配置參數(shù)的

Vue.use(vueLazyload,{})

可選的參數(shù)如下：

preLoad:類型Number,默認1.3. 表示lazyload的元素距離頁面底部距離的百分比.計算值為(preload - 1).

attempt:圖片加載失敗后的重試次數(shù).默認為3.

error:類型string.圖片加載失敗后的顯示的失敗圖片路徑.

loading:類型string.圖片正在加載中顯示的loading圖片的路徑.

listenEvents:類型array.默認['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'].即是在監(jiān)聽上述事件中,判斷圖片是否在preload的位置.如果你不想在那么多事件中判斷,可以指定一個或者幾個.例如如果你給這個屬性只指定['touchmove'].那么scroll 屏幕不會加載圖片,只有手指滑動屏幕才會加載圖片.

adapter:注冊img 的loading,loaded,error三個狀態(tài)的回調函數(shù),參數(shù)會暴露懶加載的img元素,可以對其進行操作.

filter: img未加載之前,解析到src 的時候注冊的回調函數(shù).可以在加載圖片之前,對src進行修改.注冊在filter下的所有的函數(shù)都會執(zhí)行

更多參數(shù)的解釋：https://segmentfault.com/a/1190000011672452