快捷導(dǎo)航

vue圖片懶加載代碼實(shí)現(xiàn)

更新時(shí)間：2023年07月26日 15:27:59 作者：重工瀟灑哥

這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實(shí)現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當(dāng)我們?yōu)g覽頁面時(shí),只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動(dòng)時(shí)再繼續(xù)加載后面的圖片,需要的朋友可以參考下

1、首先解釋一下什么叫圖片懶加載：

我們使用軟件的時(shí)候，會(huì)有很多圖片需要加載，但是當(dāng)網(wǎng)絡(luò)環(huán)境不好，或內(nèi)存不足的情況，就會(huì)導(dǎo)致用戶首屏加載特別慢，影響用戶體驗(yàn)，所以為了解決這個(gè)問題，提出了圖片懶加載的方法來解決該問題。

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)境來全力加載該可視區(qū)域的圖片，增加加載速度；在圖片沒有到達(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ì)渲染圖片出來
  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)用方法
})