教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

圖片懶加載實現(xiàn)原理？如何實現(xiàn)懶加載？

更新時間:2021年09月29日18時15分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

圖片懶加原理

圖片懶加載的原理很簡單，就是我們先設(shè)置圖片的data-set屬性(當(dāng)然也可以是其他任意的，只要不會發(fā)送http請求就行了，作用就是為了存取值)值為其圖片路徑，由于不是src，所以不會發(fā)送http請求。 然后我們計算出頁面scrollTop的高度和瀏覽器的高度之和，如果圖片舉例頁面頂端的坐標(biāo)Y(相對于整個頁面，而不是瀏覽器窗口)小于前兩者之和，就說明圖片就要顯示出來了(合適的時機(jī)，當(dāng)然也可以是 其他情況)，這時候我們再將 data-set屬性替換為src屬性即可。


圖片懶加載實現(xiàn)步驟：

1. 在main.js中導(dǎo)入Vant中的Lazyload指令并注冊：

import Vue from 'vue'
import { Lazyload } from 'vant' // 導(dǎo)入懶加載模塊Lazyload
Vue.use(Lazyload) // 注冊懶加載指令

2. 為van-image設(shè)置lazy-load指令屬性

<!-- lazy-load設(shè)置圖片懶加載，是一個自定義指令 -->
<van-image width="90" height="90" :src="item2" lazy-load/>


猜你喜歡：

什么是Vue過渡和動畫？

什么是Vue？Vue的工作原理是什么？

vue如何監(jiān)控屬性值變化？

Vue3為什么使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽？

傳智教育HTML&JS+前端高手班

0 分享到：
和我們在線交談！