快捷導(dǎo)航

JavaScript實(shí)現(xiàn)圖片懶加載的三種方案詳解

更新時(shí)間：2023年12月26日 08:20:12 作者：起風(fēng)了啰

圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載,提升用戶的體驗(yàn),這篇文章主要為大家整理了三個(gè)常用的圖片懶加載實(shí)現(xiàn)方法,希望對大家有所幫助

一、前言

圖片懶加載，當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載，提升用戶的體驗(yàn)。因?yàn)橛行┯脩舨粫赐陥D片，全部加載會浪費(fèi)流量。在網(wǎng)上查閱資料，總結(jié)了三種辦法，有各自的利弊，下文一一介紹。

方法	優(yōu)點(diǎn)	缺點(diǎn)	推薦指數(shù)
設(shè)置img loading	h5的屬性，沒有兼容問題	需要已知圖片高度、寬高比	????
IntersectionObserver API	無需知道圖片高度	低版本需引入polyfill	??????
vue-lazyload 自定義指令	無需知道圖片高度	github現(xiàn)存issues較多，沒有解決	????

二、實(shí)現(xiàn)方式及Demo

1. 設(shè)置img標(biāo)簽loading屬性

loading屬性允許兩個(gè)值：eager立即加載圖像（默認(rèn)值）；lazy延遲加載圖像。在使用lazy屬性的時(shí)候，需要設(shè)置<img>標(biāo)簽的高度，否則無法懶加載。

注意： 適用于兩種場景，圖片高度已知、圖片寬高比已知。

已知圖片高度

<style>
  .img-box img {
    width: 100%;
    height: 700px; /*設(shè)置為圖片的真實(shí)高度*/
  }
</style>

<div class="img-box">
  <img src="https://i.postimg.cc/GtN3Cs02/1.jpg" loading="lazy" />
  <img src="https://i.postimg.cc/hGdKLGdW/2.jpg" loading="lazy" />
  <img src="https://i.postimg.cc/T1SkJTbF/3.jpg" loading="lazy" />
  <img src="https://i.postimg.cc/wxPFPTtb/4.jpg" loading="lazy" />
  <img src="https://i.postimg.cc/FRkGF28x/5.jpg" loading="lazy" />
  <img src="https://i.postimg.cc/05JH9wqq/6.jpg" loading="lazy" />
</div>

已知圖片寬高比

 <style>
  .img-box div {
    position: relative;
    padding-top: 66%; /* (你的圖片的高度/寬度值) */
    overflow: hidden;
  }
  .img-box img {
    position: absolute;
    top:0;
    right:0;
    width:100%;
  }
</style>

<div class="img-box">
  <div>
    <img src="https://i.postimg.cc/GtN3Cs02/1.jpg" loading="lazy" />
  </div>
  <div>
    <img src="https://i.postimg.cc/hGdKLGdW/2.jpg" loading="lazy" />
  </div>
  <div>
    <img src="https://i.postimg.cc/T1SkJTbF/3.jpg" loading="lazy" />
  </div>
  <div>
    <img src="https://i.postimg.cc/wxPFPTtb/4.jpg" loading="lazy" />
  </div>
  <div>
    <img src="https://i.postimg.cc/FRkGF28x/5.jpg" loading="lazy" />
  </div>
  <div>
    <img src="https://i.postimg.cc/05JH9wqq/6.jpg" loading="lazy" />
  </div>
</div>

2. 使用 IntersectionObserver

IntersectionObserver接口，可以觀察DOM節(jié)點(diǎn)是否出現(xiàn)在視口，當(dāng)DOM節(jié)點(diǎn)出現(xiàn)在視口中才加載圖片。img必須有高度，否則圖片默認(rèn)都在視口中，會將圖片全部加載?？梢栽O(shè)置img的src為base64白色圖片，然后在替換為真實(shí)的圖片地址。

注意： 不需要預(yù)先知道圖片的高度，但是有兼容性問題，低版本需要引入intersection-observer polyfill

已知圖片高度

<style>
    .img-box .lazy-img {
        width: 100%;
        height: 600px; /*如果已知圖片高度可以設(shè)置*/
    }
</style>

<div class="img-box">
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/d48aed7c991b43d850d011f2299d852e.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/a588b152c79ac60162ecbdf82b060061.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/eacbc2cd4b6ca636077378182bdfcc88.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/751470f4b478450e8556f78cd7dd3d96.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/e4a531bee5694a4a01dee74b18bbfd8b.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/7d8f107e827a7beaa0b9d231bfa4187f.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/4f7586f6b74f2bd0b94004fcbae69856.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/863849e14e7e8903ed4b27fcbdafe8b0.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
  <img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/d8bb17fe9a7223f35075014ef250e2fa.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
</div>

<script>
    function Observer() {
        let images = document.querySelectorAll(".lazy-img");
        let observer = new IntersectionObserver(entries => {
            entries.forEach(item => {
                if (item.isIntersecting) {
                    item.target.src = item.target.dataset.origin; // 開始加載圖片,把data-origin的值放到src
                    observer.unobserve(item.target); // 停止監(jiān)聽已開始加載的圖片
                }
            });
        });
        images.forEach(img => observer.observe(img));
    }
    Observer()
</script>

3. 使用vue-lazyload

在vue2中使用時(shí)，建議安裝npm i vue-lazyload@1.3.3 -s，使用高版本在main.js中全局自定義指令后依然無法使用指令。在vue3中可以使用 npm i vue3-lazy -s。

全局注冊自定義指令，在頁面就可以使用了

// 全局自定義指令
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1,
  observer: true // 設(shè)置為true，內(nèi)部使用IntersectionObserver。默認(rèn)使用
})

/* 在頁面中直接使用 */
<div>
    <img v-lazy="https://images.djtest.cn/pic/test/d48aed7c991b43d850d011f2299d852e.jpg">
    <img v-lazy="https://images.djtest.cn/pic/test/a588b152c79ac60162ecbdf82b060061.jpg">
    <img v-lazy="https://images.djtest.cn/pic/test/eacbc2cd4b6ca636077378182bdfcc88.jpg">
    <img v-lazy="https://images.djtest.cn/pic/test/751470f4b478450e8556f78cd7dd3d96.jpg">
</div>

以上就是JavaScript實(shí)現(xiàn)圖片懶加載的三種方案詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript圖片懶加載的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: