前言

在說到對(duì)圖片資源進(jìn)行優(yōu)化時(shí)，那就不得不提到圖片預(yù)加載和圖片懶加載，可能很多朋友都了解這兩者，但是一直沒有很清晰的概念，以及什么時(shí)候用，用在什么場(chǎng)景下，今天就來詳細(xì)的了解一下吧！

圖片的預(yù)加載

1. 什么是預(yù)加載？

• 預(yù)加載就是提前加載需要用到的圖片素材，在用戶需要用的時(shí)候可以直接從本地緩存中獲取并渲染。

2. 預(yù)加載的原理

• 提前加載所需要的圖片資源，加載完畢后會(huì)緩存到本地，當(dāng)需要時(shí)可以立馬顯示出來，以達(dá)到在預(yù)覽的過程中，無需等待直接預(yù)覽的良好體驗(yàn)。簡(jiǎn)而言之，就是需要顯示前先加載。

3. 為什么要使用預(yù)加載

• 原因是，在網(wǎng)頁全部加載之前，對(duì)一些主要內(nèi)容進(jìn)行加載，以提供給用戶更好的體驗(yàn)，減少等待的時(shí)間。否則，如果一個(gè)頁面的內(nèi)容過于龐大，沒有使用預(yù)加載技術(shù)的頁面就會(huì)長時(shí)間的展現(xiàn)為一片空白，直到所有內(nèi)容加載完畢。

預(yù)加載的實(shí)現(xiàn)方式

1. css的方式

<div class="preload-pic"></div>
.preload-pic { background: url(https://img2.baidu.com/it/u=1028011339,1319212411&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313) no-repeat }  

2. 使用js實(shí)現(xiàn)，通過new Image對(duì)象設(shè)置實(shí)例對(duì)象的src屬性實(shí)現(xiàn)圖片的預(yù)加載。

• 代碼實(shí)現(xiàn)：

 <div class="img-container">
  <p></p>
  <img src="../../static/1.jpg" alt="圖片" id="img" />
</div>
<script>
  const imgList = [
    '../../static/2.jpg',
    '../../static/3.jpg',
    '../../static/4.jpg',
    '../../static/5.jpg',
    '../../static/6.jpg',
    '../../static/7.jpg',
    '../../static/8.jpg',
    '../../static/9.jpg'
  ]

  // 當(dāng)前圖片下標(biāo)
  let current = 0
  const getImage = document.getElementById('img')
  const p = document.querySelector('p')
  p.innerHTML = `實(shí)現(xiàn)預(yù)加載的效果，我是第${current + 1}張圖片`
  
  //頁面一開始加載數(shù)組的第一個(gè)元素
  preLoad(imgList[current]).then(data => {
    console.log(data)
  })

    // 預(yù)加載函數(shù)
    function preLoad(src) {
    return new Promise((resolve, reject) => {
      // 創(chuàng)建一個(gè)新的圖片標(biāo)簽
      const image = new Image()
        // 將傳進(jìn)來的src賦值給新的圖片
        image.src = src
      // 圖片加載完成調(diào)用成功狀態(tài)
      image.addEventListener('load', () => resolve(image), false)
      // 圖片加載完成調(diào)用失敗狀態(tài)
      image.addEventListener('error', () => reject(), false)
      
    })
  }

  getImage.addEventListener('click', () => {
    // 當(dāng)索引小于數(shù)組的長度時(shí)
    if (current < imgList.length) {
      // 將數(shù)組元素的src賦值給頁面的元素
      getImage.src = imgList[current]
      // 當(dāng)前遞增值加1，下次點(diǎn)擊變成數(shù)組的第二個(gè)元素
      current++
      p.innerHTML = `實(shí)現(xiàn)預(yù)加載的效果，我是第${current + 1}張圖片`

      //切換圖片后，同時(shí)讓瀏覽器提前加載下一張圖片
      if (current < imgList.length) {
        preLoad(imgList[current]).then(data => {
          console.log('預(yù)加載成功', data)
        })
      }
    } 
  })
</script>

圖片的懶加載

1. 什么事懶加載？

• 懶加載其實(shí)也叫做延遲加載、按需加載，在比較長的網(wǎng)頁或應(yīng)用中，如果圖片有很多，一下子之間把所有的圖片都加載出來的話，耗費(fèi)很多性能，而且用戶不一定會(huì)把圖片全部看完。只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，讓圖片顯示出來，這就是圖片懶加載。

2. 懶加載的原理

• 懶加載其實(shí)也叫做延遲加載、按需加載，在比較長的網(wǎng)頁或應(yīng)用中，如果圖片有很多，一下子之間把所有的圖片都加載出來的話，耗費(fèi)很多性能，而且用戶不一定會(huì)把圖片全部看完。只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，讓圖片顯示出來，這就是圖片懶加載。

3. 為什么使用懶加載

• 當(dāng)頁面很多，內(nèi)容很豐富的時(shí)候，頁面很長，圖片較多，比如淘寶頁面，要是頁面載入就一次性加載完畢，就需要等很長的時(shí)間。

懶加載的實(shí)現(xiàn)方式

1. 實(shí)現(xiàn)方式一

• getBoundingClientRect方法
• 參考文檔：developer.mozilla.org/zh-CN/docs/…^[1]

 <div class="img-box">
      <div class="img-container">
        <img
          src="https://gitee.com/z1725163126/cloundImg/raw/master/loading.gif"
          alt=""
          data-src="../../static/1.jpg"
          class="lazyload"
        />
      </div>
      <div class="img-container">
        <img
          src="https://gitee.com/z1725163126/cloundImg/raw/master/loading.gif"
          alt=""
          data-src="../../static/2.jpg"
          class="lazyload"
        />
      </div>
      <div class="img-container">
        <img
          src="https://gitee.com/z1725163126/cloundImg/raw/master/loading.gif"
          alt=""
          data-src="../../static/3.jpg"
          class="lazyload"
        />
      </div>
    </div>
  <script>
      const getImage = [...document.querySelectorAll('.lazyload')]
      function lazyLoad() {
        getImage.forEach(item => {
          // 判斷是否在可視區(qū)域內(nèi)
          if (isInVisible(item)) {
          // 如果在可視區(qū)域內(nèi)，就設(shè)置src的路徑
            item.src = item.dataset.src
          }
        })
      }

      function isInVisible(image) {
        const rect = image.getBoundingClientRect()
        return (
          rect.bottom > 0 &&
          rect.top < window.innerHeight &&
          rect.right > 0 &&
          rect.left < window.innerWidth
        )
      }
      lazyLoad()
     // window.addEventListener('scroll', lazyLoad)
      
      /*
        優(yōu)化：
        節(jié)流 ：事件處理函數(shù)執(zhí)行一次后，在某個(gè)時(shí)間期限內(nèi)不再工作
        fun:傳入一個(gè)函數(shù)
        miliseconds:間隔時(shí)間
      */

      function throttle(fun, time = 250) {
        let lastTime = 0 //最后一次執(zhí)行的時(shí)間
        return function (...args) {
          const now = new Date().getTime()
          if (now - lastTime >= time) {
            fun()
            lastTime = now
          }
        }
      }
      window.addEventListener('scroll', throttle(lazyLoad, 1000), false)
    </script>

2. 實(shí)現(xiàn)方式二

• 使用IntersectionObserver API 交叉視口
• 參考文檔：developer.mozilla.org/zh-CN/docs/…^[2]

<script>
      // 轉(zhuǎn)換成數(shù)組方便處理
      const imgList = [...document.querySelectorAll('.lazyload')]

      // 實(shí)例化構(gòu)造函數(shù)
      const observer = new IntersectionObserver(entries => {
        //entries是一個(gè)數(shù)組，所以還需要遍歷
        console.log(entries)
        entries.forEach(item => {
          //isIntersecting是否在可視區(qū)域展示
          if (item.isIntersecting) {
            //獲取圖片的自定義屬性并賦值給src
            item.target.src = item.target.dataset.src
            //替換為真是src地址后取消對(duì)它的觀察
            observer.unobserve(item.target)
          }
        })
      })

      //遍歷所有的圖片，給每個(gè)圖片添加觀察
      imgList.forEach(item =>  observer.observe(item))
      
    </script>

3. 實(shí)現(xiàn)方式三

• VueUse中useIntersectionObserver
• 參考文檔：vueuse.nodejs.cn/core/useInt…^[3]

// 使用自定義指令
<template>
  <div class="laz-box" v-for="item in imgList" :key="item.id">
    <img v-img-lazy="item.url" style="width: 100vw; height: 200px" />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(i => {
  return {
    id: `${i}`,
    url: require(`../static/${i}.jpg`)
  }
})
const imgList = reactive(data)
</script>

注冊(cè)全局自定義指令：
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
  install(app) {
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el: 指令掛載到的那個(gè)元素 dom 的 img
        // binding: value 指令等于號(hào)后面表達(dá)式的值 url
        el.src = require(`../static/loading.gif`)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          console.log('進(jìn)入可視區(qū)域', isIntersecting)
          //判斷當(dāng)前監(jiān)聽元素是否進(jìn)入視口區(qū)域
          if (isIntersecting) {
            el.src = binding.value
            el.onerror = () => {
              el.src = require(`../static/loading.gif`)
            }
            // 加載圖片之后停止監(jiān)聽
            stop()
          }
        },
        {
          threshold: 0.5
        }
      )
      }
    })
  }
}

兩者的區(qū)別

二者都是提高頁面性能的有效辦法,區(qū)別是一個(gè)是提前加載,一個(gè)是延遲加載甚至不加載.

• 懶加載對(duì)服務(wù)器前端有一定的緩解壓力的作用.
• 預(yù)加載則會(huì)增加服務(wù)器前端的壓力，換取更好的用戶體驗(yàn)，這樣可以使用戶的操作得到最快的反映。