vue圖片懶加載代碼實現(xiàn)
更新時間：2023年07月26日 15:27:59 作者：重工瀟灑哥
這篇文章主要給大家介紹了關于vue圖片懶加載代碼實現(xiàn)的相關資料,所謂圖片懶加載是指當我們?yōu)g覽頁面時,只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動時再繼續(xù)加載后面的圖片,需要的朋友可以參考下
1、首先解釋一下什么叫圖片懶加載：
我們使用軟件的時候，會有很多圖片需要加載，但是當網(wǎng)絡環(huán)境不好，或內(nèi)存不足的情況，就會導致用戶首屏加載特別慢，影響用戶體驗，所以為了解決這個問題，提出了圖片懶加載的方法來解決該問題。
2、解決思路：
①當圖片區(qū)域到達用戶界面可視區(qū)域的時候才進行加載圖片
②首屏加載時候img標簽src賦為空值，這樣就不會去渲染看不見的圖片而浪費時間
③當用戶滑動到圖片的可視區(qū)域后，替換src的路徑，改為正式路徑，則開始渲染圖片
3、好處：
這樣做的好處就是可以使用當前網(wǎng)絡環(huán)境來全力加載該可視區(qū)域的圖片，增加加載速度；在圖片沒有到達可視區(qū)域的時候不會加載，避免浪費性能
4、代碼實現(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 設置全局自定義指令 命名為 lazy
// 定義懶加載圖片或者文件等，自定義指令
Vue.directive('lazy', (el, binding) => {
let oldSrc = el.src //保存舊的src，方便后期渲染時候賦值src真實路徑
el.src = "" //將渲染的src賦為空，則不會渲染圖片出來
let observer = new IntersectionObserver(([{ isIntersecting }]) => { // 調(diào)用方法得到該elDOM元素是否處于可視區(qū)域
if (isIntersecting) { //回調(diào)是否處于可視區(qū)域，true or false
el.src = oldSrc //如果處于可視區(qū)域額，將最開始保存的真實路徑賦予DOM元素渲染
observer.unobserve(el) // 只需要監(jiān)聽一次即可，第二次滑動到可視區(qū)域時候不在監(jiān)聽
}
})
observer.observe(el) // 調(diào)用方法
})5、弊端
IntersectionObserver 方法可能沒有兼容全瀏覽器，如果要實現(xiàn)兼容全瀏覽器，可以引入對應的插件實現(xiàn)
總結(jié)
到此這篇關于vue圖片懶加載代碼實現(xiàn)的文章就介紹到這了,更多相關vue圖片懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在Vue中樹形組件是一種用于展示層級結(jié)構(gòu)數(shù)據(jù)的UI組件,常用于展示如文件目錄、組織架構(gòu)等具有層級關系的數(shù)據(jù),這篇文章主要介紹了Vue3中Tree樹組件開發(fā)文檔的相關資料,需要的朋友可以參考下2026-03-03
我們?nèi)粘ｍ椖块_發(fā)中,少不了組件之間的通信,我們可能只知道一些常見的方式比如props,emits,其實,實現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見的通信方式,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue 使用外部JS與調(diào)用原生API操作,結(jié)合實例形式分析了vue.js調(diào)用外部JS與原生API相關操作技巧及注意事項,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用Vue.js報錯：ReferenceError: “Vue is not d
在前端開發(fā)中,ReferenceError: "Vue is not defined" 是一個常見的錯誤,該錯誤通常發(fā)生在項目中未正確引入 Vue.js 框架或代碼配置存在問題時,本篇文章將詳細分析該錯誤的成因,并提供多種解決方案,幫助開發(fā)者快速排查問題,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue項目刷新當前頁面的三種方法，本文圖文并茂給大家介紹的非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
opener屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的Window對象的引用,下面這篇文章主要給大家介紹了關于vue中對window.openner使用的相關資料,需要的朋友可以參考下2022-11-11
Vue.use()主要用于注冊全局插件,當插件具有install方法時,調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊全局變量,這些變量在項目任何位置都可以通過this.$變量名訪問,兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量2024-10-10
vue3+echarts實現(xiàn)好看的圓角環(huán)形圖
這篇文章主要介紹了vue3+echarts實現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了前后端分離項目中的跨域問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12