vue圖片懶加載代碼實(shí)現(xiàn)
1、首先解釋一下什么叫圖片懶加載：
我們使用軟件的時(shí)候，會(huì)有很多圖片需要加載，但是當(dāng)網(wǎng)絡(luò)環(huán)境不好，或內(nèi)存不足的情況，就會(huì)導(dǎo)致用戶首屏加載特別慢，影響用戶體驗(yàn)，所以為了解決這個(gè)問(wèn)題，提出了圖片懶加載的方法來(lái)解決該問(wèn)題。
2、解決思路：
①當(dāng)圖片區(qū)域到達(dá)用戶界面可視區(qū)域的時(shí)候才進(jìn)行加載圖片
②首屏加載時(shí)候img標(biāo)簽src賦為空值，這樣就不會(huì)去渲染看不見的圖片而浪費(fèi)時(shí)間
③當(dāng)用戶滑動(dòng)到圖片的可視區(qū)域后，替換src的路徑，改為正式路徑，則開始渲染圖片
3、好處：
這樣做的好處就是可以使用當(dāng)前網(wǎng)絡(luò)環(huán)境來(lái)全力加載該可視區(qū)域的圖片，增加加載速度；在圖片沒(méi)有到達(dá)可視區(qū)域的時(shí)候不會(huì)加載，避免浪費(fèi)性能
4、代碼實(shí)現(xiàn)（vue2）：
① test.vue 文件
<template>
<div class="app">
<div class="top">fjdskla</div>
<div><img v-lazy src="../static/image/left.jpg" alt="img" /></div>
<div><img v-lazy src="../static/image/left.png" alt="img" /></div>
<div><img v-lazy src="../static/image/left.jpg" alt="img" /></div>
<div><img v-lazy src="../static/image/left.png" alt="img" /></div>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {},
methods: {},
}
</script>
<style scoped lang="scss">
.app {
.top {
height: 2000px;
width: 100%;
background-color: beige;
}
div {
margin-top: 50px;
}
}
</style>② main.js 設(shè)置全局自定義指令 命名為 lazy
// 定義懶加載圖片或者文件等，自定義指令
Vue.directive('lazy', (el, binding) => {
let oldSrc = el.src //保存舊的src，方便后期渲染時(shí)候賦值src真實(shí)路徑
el.src = "" //將渲染的src賦為空，則不會(huì)渲染圖片出來(lái)
let observer = new IntersectionObserver(([{ isIntersecting }]) => { // 調(diào)用方法得到該elDOM元素是否處于可視區(qū)域
if (isIntersecting) { //回調(diào)是否處于可視區(qū)域，true or false
el.src = oldSrc //如果處于可視區(qū)域額，將最開始保存的真實(shí)路徑賦予DOM元素渲染
observer.unobserve(el) // 只需要監(jiān)聽一次即可，第二次滑動(dòng)到可視區(qū)域時(shí)候不在監(jiān)聽
}
})
observer.observe(el) // 調(diào)用方法
})5、弊端
IntersectionObserver 方法可能沒(méi)有兼容全瀏覽器，如果要實(shí)現(xiàn)兼容全瀏覽器，可以引入對(duì)應(yīng)的插件實(shí)現(xiàn)
總結(jié)
到此這篇關(guān)于vue圖片懶加載代碼實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue圖片懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
v-show 指令通過(guò)改變?cè)氐?css 屬性（display）來(lái)決定元素是顯示還是隱藏。這篇文章主要介紹了Vue.js 中的 v-show 指令及用法詳解,需要的朋友可以參考下2018-11-11
文章介紹了如何使用Vue原生上傳圖片,并在圖片上添加水印并壓縮圖片大小,首先,安裝了相應(yīng)的插件并進(jìn)行封裝,然后,介紹了添加水印的方法和上傳圖片的過(guò)程,最后,作者分享了自己的經(jīng)驗(yàn),并希望對(duì)大家有所幫助2025-01-01
vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法
本文主要介紹了vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件
這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
詳解在Vue中如何使用axios跨域訪問(wèn)數(shù)據(jù)
本篇文章主要介紹了在Vue中如何使用axios跨域訪問(wèn)數(shù)據(jù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue css 引入asstes中的圖片無(wú)法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無(wú)法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue前端項(xiàng)目部署的三種方案,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
vue子組件封裝彈框只能執(zhí)行一次的mounted問(wèn)題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue父子模板傳值問(wèn)題解決方法,結(jié)合案例形式分析了vue.js父子模板傳值問(wèn)題相關(guān)實(shí)現(xiàn)方法與具體操作步驟,需要的朋友可以參考下2020-02-02