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

全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

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

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

好口碑IT培訓(xùn)

圖片懶加原理

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


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

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

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

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

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


猜你喜歡：

什么是Vue過(guò)渡和動(dòng)畫(huà)？

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

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

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

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

0 分享到：
和我們?cè)诰€(xiàn)交談！