什么叫懶加載
通俗講 : 懶加載就是延時加載，即當需要用到的時候再去加載。
那什么叫做需要用到的時候？
比如一個圖片在沒有出現(xiàn)在可視區(qū)域內，就已經加載當頁面里了, 但只有滾動頁面下方式才能看見, 則可以認為這個圖片加載的"過早"了。
懶加載的優(yōu)點
- 可以減少首頁首次加載的數(shù)量，減少服務器的壓力
- 當網絡請求比較慢的時候, 提前給這張圖片添加一個像素比較低的占位圖片，不至于堆疊在一塊，或顯示大片空白，讓用戶體驗更好一點。
為什么使用懶加載
可以想象一個網頁打開有成百上千的圖片需要加載，頁面會變得非常的卡頓，此時如果只是可視區(qū)域的圖片加載，其他的圖片可以暫時有一個占位 loading 圖，等滾動它們到可視區(qū)域時再去請求真實圖片并且替換就好了。vue-lazyload 插件就是解決此類問題的，對vue插件的寫法不熟悉的可以先看一下vue插件
懶加載原理是什么
先將 img 標簽中的src鏈接設為同一張圖片（空白圖片），將其真正的圖片地址存儲再 img 標簽的自定義屬性中（比如data-src）。當js監(jiān)聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。
如何實現(xiàn)懶加載
第一步: 安裝
npm install vue-lazyload --save
第二步: 全局注冊
main.js 文件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置項
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
| 鍵 | 描述 | 默認 | 選項 |
|---|---|---|---|
| preLoad | 表示lazyload的元素,距離頁面底部距離的百分比.計算值為(preload - 1) | 1.3 | Number |
| error | 加載失敗后圖片地址 | 'data-src' | String |
| loading | 加載時圖片地址 | 'data-src' | String |
| attempt | 圖片加載失敗后的重試次數(shù) | 3 | Number |
| listenEvents | 觸發(fā)懶加載的事件 | ['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'] | 無 |
| adapter | 注冊img 的loading,loaded,error三個狀態(tài)的回調函數(shù),參數(shù)會暴露懶加載的img元素,可以對其進行作. | { } | 無 |
| filter | img未加載之前,解析到src 的時候注冊的回調函數(shù).可以在加載圖片之前,對src進行修改.注冊在filter下的所有的函數(shù)都會執(zhí)行 | {} | 無 |
| lazyComponent | 是否啟用懶加載組件.<lazy-component>組件中的內容只有在出現(xiàn)在preload的位置中才會加載組件.這個lazyloadComponent組件有個缺點就是,組件在加載前是什么都不渲染的,這樣子的話,有可能會影響布局,以及加載前到加載后的切換不好,有點突兀和生硬. | false | Boolean |
| dispatchEvent | 觸發(fā)dom事件 | false | Number |
| throttleWait | 等待時長 | 200 | Number |
| observer | 等待時長 | 是否啟用IntersectionObserver,這個api有兼容問題 | Number |
| observerOptions | IntersectionObserver選項 | { rootMargin: '0px',threshold: 0.1 } | 無 |
| silent | 不打印調試信息 | true | Boolean |
因為src中的文件會被webpack編譯，assets文件夾中的圖片地址，會在編譯過程中重命名。vue-lazyload是在main.js文件中引入，不會被webpack進行編譯，因此vue-lazyload無法獲得正確的圖片地址，所以直接寫相對地址就無法獲取到圖片正確地址
第三步: 寫loading圖片的樣式（不是必須, 視情況而定）
img[lazy="loading"]{
display:block;
width:50px !important;
height:50px !important;
margin:0 auto;
}
第四步: 使用 ( :src--->v-lazy )
<div class="lazyLoad">
<ul id="container">
<li v-for="img in arr">
<img v-lazy="img.thumbnail_pic_s">
</li>
</ul>
</div>
這里有個坑需要注意
如設置了翻頁功能，且每一頁都是請求的數(shù)據(jù)進行渲染。
會發(fā)現(xiàn)其他的數(shù)據(jù)都變了，唯獨圖片還是原來的圖片。
由于使用的數(shù)據(jù)是父組件傳過來的，第一個想到父組件axios異步請求的數(shù)據(jù)導致子組件可能數(shù)據(jù)沒有動態(tài)更新。但監(jiān)聽了下數(shù)據(jù)，發(fā)現(xiàn)確實是改變了 .
解決辦法只要加個key就行, 如下代碼
<ul>
<li v-for="img in list">
<img v-lazy="img.src" :key="img.src" >
</li>
</ul>
