JavaScript實現(xiàn)圖片懶加載的兩種方式

更新時間：2024年04月19日 08:24:21 作者：挖稀泥的工人

現(xiàn)在的科技發(fā)達,圖片的資源占比越來越大,對圖片在頁面的優(yōu)化已經成為前端開發(fā)必備的技術之一,難的圖片懶加載方法咱們看著頭大,簡單,易懂的才適合我們程序員,所以本文給大家介紹了JavaScript實現(xiàn)圖片懶加載的兩種方式,需要的朋友可以參考下

引言

現(xiàn)在的科技發(fā)達，圖片的資源占比越來越大，對圖片在頁面的優(yōu)化已經成為前端開發(fā)必備的技術之一，難的圖片懶加載方法咱們看著頭大，簡單，易懂的才適合我們程序員。

很好，開始第一步將圖片的標簽放好，設定一個data-origin標簽在img當中，這樣使用data-的命名方式是為了與HTML5的自定義數(shù)據(jù)屬性約定保持一致。

簡單的方式

思路就是

先獲取到可視區(qū)域，我們使用clientHeight，它可以獲取到html元素的客戶端高度。
獲取到帶有data-origin標簽的全部img屬性
獲取每張圖片相對視窗口的高度，使用getBoundingClientRect，其中包含各種元素相對于視口的信息和元素本身的信息。
一旦圖片相對于視窗頂部的距離小于可視區(qū)域高度，那就將data-origin標簽的url賦給src，最后清除data-origin標簽。

<style>
        img{
            height: 300px;
            width: 300px;
            margin-bottom: 50px;
            display: block;
        }
    </style>
</head>
<body>
    <img src="" data-origin="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
    <img src="" data-origin="https://img1.baidu.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt="">
    <img src="" data-origin="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800">
    <img src="" data-origin="https://img2.baidu.com/it/u=855369075,175194576&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
    <img src="" data-origin="https://img2.baidu.com/it/u=2004708195,3393283717&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
    <img src="" data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt="">
    <img src="" data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt="">
    <img src="" data-origin="https://img0.baidu.com/it/u=2788901948,3907873318&fm=253&fmt=auto?w=500&h=281" alt="">
    <img src="" data-origin="https://img2.baidu.com/it/u=811993169,635123395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
    <img src="" data-origin="https://img0.baidu.com/it/u=924031950,2251460669&fm=253&fmt=auto&app=138&f=JPEG?w=1105&h=500" alt="">

<script>
    //獲取可視區(qū)域的高度    offsetHeight包含外部高度（邊框）
    const viewHeight = document.documentElement.clientHeight  //window.innerHeight
    // console.log(viewHeight);
    function lazyLoad(){
        const imgs = document.querySelectorAll('img[data-origin]') //屬性選擇
        console.log(imgs);
        imgs.forEach(item =>{
            let res = item.getBoundingClientRect()
            // console.log(res);
            if(res.top < viewHeight){
                item.src = item.dataset.origin
                item.removeAttribute('data-origin')
            }
        })

        // 獲取可視區(qū)域的高度
    // const viewHeight = document.documentElement.clientHeight
    // const io = new IntersectionObserver(
    //   (entries) => {
    //     entries.forEach(entry => {
    //       if (entry.isIntersecting) {
    //         entry.target.src = entry.target.dataset.original || ''
    //         entry.target.removeAttribute('data-original')
    //         io.unobserve(entry.target)
    //       }
    //     })
    //   },
    //   {
    //     threshold: 0
    //   }
    // )
    // const imgs = document.querySelectorAll('img[data-original]')
    // imgs.forEach(item => {
    //   io.observe(item)
    // })



    }

    document.addEventListener('scroll',lazyLoad)

    lazyLoad()

</script>

</body>

第二個方法

第二個方法就相對更復雜一些，通過判斷某個元素和父元素交叉比例來判斷是否需要懶加載。是異步監(jiān)聽的。當交叉比例達到某個值就會觸發(fā)回調函數(shù)。我們這里使用的是IntersectionObserver方法，用一個外部box包裹所有圖片，讓圖片超出box就滾動?？戳松厦娴姆椒ǎ@個方法也就明白在干什么了。

    #box{
      width: 100vw;
      height: 100vh;
      overflow: scroll;
    }
    img{
      height: 300px;
      margin-bottom: 50px;
      display: block;
    }


    const viewHeight = document.documentElement.clientHeight
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
        //判斷是否進入可視區(qū)
          if (entry.isIntersecting) {
            entry.target.src = entry.target.dataset.original || ''
            //移除標簽
            entry.target.removeAttribute('data-original')
            io.unobserve(entry.target)
          }
        })
      },
      {
      取值范圍從0~1，表示交叉比例
        threshold: 0
      }
    )
    
    //監(jiān)聽每一張圖片
    const imgs = document.querySelectorAll('img[data-original]')
    imgs.forEach(item => {
      io.observe(item)
    })

到此這篇關于JavaScript實現(xiàn)圖片懶加載的兩種方式的文章就介紹到這了,更多相關JavaScript圖片懶加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: