當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue 图片懒加载之 Vue-Lazyload

發布時間：2023/12/29 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 图片懒加载之 Vue-Lazyload 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、什么叫懶加載

通俗講 : 懶加載就是延時加載，即當需要用到的時候再去加載。
那什么叫做需要用到的時候？
比如一個圖片在沒有出現在可視區域內，就已經加載當頁面里了, 但只有滾動頁面下方式才能看見, 則可以認為這個圖片加載的"過早"了。

二、懶加載的優點

可以減少首頁首次加載的數量，減少服務器的壓力

當網絡請求比較慢的時候, 提前給這張圖片添加一個像素比較低的占位圖片，不至于堆疊在一塊，或顯示大片空白，讓用戶體驗更好一點。

三、為什么使用懶加載

可以想象一個網頁打開有成百上千的圖片需要加載，頁面會變得非常的卡頓，此時如果只是可視區域的圖片加載，其他的圖片可以暫時有一個占位 loading 圖，等滾動它們到可視區域時再去請求真實圖片并且替換就好了。vue-lazyload 插件就是解決此類問題的，對vue插件的寫法不熟悉的可以先看一下vue插件

懶加載原理是什么

頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過javascript設置了圖片路徑，瀏覽器才會發送請求。

懶加載的原理就是先在頁面中把所有的圖片統一使用一張占位圖進行占位，把真正的路徑存在元素的“data-url”（這個名字起個自己認識好記的就行）屬性里，當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。

四、vue中如何實現懶加載

第一步: 安裝

npm install vue-lazyload --save

第二步: 全局注冊（main.js）

// main.js 文件 import VueLazyload from 'vue-lazyload' // Vue.use(VueLazyload) //無配置項 // 配置項 const loadimage = require('assets/img/common/loading.gif') // const errorimage = require('assets/img/common/error.gif') Vue.use(VueLazyload, {preLoad: 1.3, //預加載的寬高比loading: loadimage, //圖片加載狀態下顯示的圖片// error: errorimage, //圖片加載失敗時顯示的圖片attempt: 1, // 加載錯誤后最大嘗試次數 }) // img元素上使用v-lazy="src";<img v-lazy="showImage"/>

配置項的參數說明

鍵描述默認選項

preLoad	表示lazyload的元素, 距離頁面底部距離的百分比. 計算值為(preload - 1)	1.3	Number
error	加載失敗后圖片地址	'data-src'	String
loading	加載時圖片地址	'data-src'	String
attempt	圖片加載失敗后的重試次數	3	Number
listenEvents	觸發懶加載的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	無
adapter	注冊img 的loading,loaded,error 三個狀態的回調函數, 參數會暴露懶加載的img元素, 可以對其進行操作.	{ }	無
filter	img未加載之前, 解析到src 的時候注冊的回調函數. 可以在加載圖片之前,對src進行修改. 注冊在filter下的所有的函數都會執行	{ }	無
lazyComponent	是否啟用懶加載組件. <lazy-component>組件中的內容只有在出現在preload的位置中才會加載組件. 這個lazyloadComponent 組件有個缺點就是,組件在加載前是什么都不渲染的, 這樣子的話,有可能會影響布局, 以及加載前到加載后的切換不好, 有點突兀和生硬.	false	無
dispatchEvent	觸發dom事件	false	Boolean
throttleWait	等待時長	200	Number
observer	是否啟用IntersectionObserver, 這個api有兼容問題	false	Boolean
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 )

這里有個坑需要注意
如設置了翻頁功能，且每一頁都是請求的數據進行渲染。
會發現其他的數據都變了，唯獨圖片還是原來的圖片。
由于使用的數據是父組件傳過來的，第一個想到父組件axios異步請求的數據導致子組件可能數據沒有動態更新。但監聽了下數據，發現確實是改變了 .
解決辦法只要加個key就行, 如下代碼

五、js---懶加載的實現步驟？

1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。

2)頁面加載完成后，根據scrollTop判斷圖片是否在用戶的視野內，如果在，則將data-original屬性中的值取出存放到src屬性中。

3)在滾動事件中重復判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中。

懶加載代碼實現

方式一：

? ? ? 元素距頂部的高度 - 頁面被卷去的高度 <= 瀏覽器可視區的高度)?
? ? ? 來判斷是否符合我們想要的條件.需要實時監聽頁面滾動時圖片的高度變化

方式二? ? ? ?getBoundingClientRect()

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;list-style: none;}img {width: 400px;height: 300px;}</style><script>window.onload = function () {var imgs = document.querySelectorAll("img");// 初始調動一次lazyLoad();window.addEventListener("scroll", throttle(lazyLoad, 1000), false);//函數1:封裝判定圖片是否在可視區function isInVisibleArea(imgOne) {const info = imgOne.getBoundingClientRect();// 獲取頁面可視區的高度，寬度let windowH = window.innerHeight;let windowW = window.innerWidth;// 限定參數在可視區內let res = info.bottom > 0 && info.top < windowH && info.right > 0 && info.left < windowW;return res;}//函數2: 封裝滾動時重新加載函數function lazyLoad() {for (let i = 0; i < imgs.length; i++) {const imgOne = imgs[i];// 判定是否在可視區內if (isInVisibleArea(imgOne)) {// 替換src方法一：// imgOne.src = imgOne.getAttribute("data-src");// 替換src方法二：imgOne.src = imgOne.dataset.src;// imgs.splice(i,1)// i--;}console.log("我滾了"); //所以要做節流操作}}//函數3:節流函數/* 參數1: 函數參數2:執行時間*/function throttle(fn, time = 250) {let lastTime = null;return function (...args) {const now = Date.now(); //當前時間if (now - lastTime >= time) {fn();//幫助執行函數，改變上下文lastTime = now;}};}};/* getBoundingClientRect()——獲取元素位置，這個方法沒有參數——用于獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。——是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。該函數返回一個Object對象，該對象有6個屬性：top,lef,right,bottom,width,height；*/</script></head><body><ul><li><img data-src="./img/img1.gif" src="./img/loading.gif" alt="" /></li><li><img data-src="./img/img2.gif" src="./img/loading.gif" alt="" /></li><li><img data-src="./img/img3.gif" src="./img/loading.gif" alt="" /></li><li><img data-src="./img/img4.gif" src="./img/loading.gif" alt="" /></li><li><img data-src="./img/img5.png" src="./img/loading.gif" alt="" /></li></ul></body> </html>

?方式三：IntersectionObserver(callback)

總結

以上是生活随笔為你收集整理的Vue 图片懒加载之 Vue-Lazyload的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Xp正版验证补丁
下一篇： vue-lazyload 简单使用