詳解JS如何處理可視區(qū)域圖片懶加載技巧

更新時間：2023年06月30日 09:27:49 作者：Skywang

這篇文章主要為大家介紹了JS如何處理可視區(qū)域圖片懶加載技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、用途

在日常開發(fā)中，我們經(jīng)常需要判斷目標元素是否在視窗之內(nèi)或者和視窗的距離小于一個值（例如 100 px），從而實現(xiàn)一些常用的功能，例如：

圖片的懶加載

二、實現(xiàn)方式

判斷一個元素是否在可視區(qū)域，我們常用的有三種辦法：

offsetTop、scrollTop 這種方式有一定局限性受offsetParenty影響
getBoundingClientRect 如果元素很多性能不如第三種
Intersection Observer 顧名思義重疊觀察者（本文先不談）

offsetTop、scrollTop

offsetTop，元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離，其他offset屬性如下圖所示：

下面再來了解下clientWidth、clientHeight：

clientWidth：元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度，即clientWidth = content + padding
clientHeight：元素內(nèi)容區(qū)高度加上上下內(nèi)邊距高度，即clientHeight = content + padding

這里可以看到client元素都不包括外邊距

最后，關于scroll系列的屬性如下：

scrollWidth 和 scrollHeight 主要用于確定元素內(nèi)容的實際大小
scrollLeft 和 scrollTop 屬性既可以確定元素當前滾動的狀態(tài)，也可以設置元素的滾動位置
- 垂直滾動 scrollTop > 0
- 水平滾動 scrollLeft > 0
將元素的 scrollLeft 和 scrollTop 設置為 0，可以重置元素的滾動位置

注意

上述屬性都是只讀的，每次訪問都要重新開始有一定局限性 offsetTop元素到最近的一個具有定位的祖宗元素的距離，若祖宗都不符合條件，祖宗為body

下面再看看如何實現(xiàn)判斷：
公式如下:

el.offsetTop - document.documentElement.scrollTop <=  window.innerHeight

代碼實現(xiàn)

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有瀏覽器寫法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}

getBoundingClientRect

返回值是一個 DOMRect對象，擁有left, top, right, bottom, x, y, width, 和 height屬性

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);
// {
//   bottom: 556.21875,
//   height: 393.59375,
//   left: 333,
//   right: 1017,
//   top: 162.625,
//   width: 684
// }

屬性對應的關系圖如下所示：

當頁面發(fā)生滾動的時候，top與left屬性值都會隨之改變

如果一個元素在視窗之內(nèi)的話，那么它一定滿足下面四個條件：

top 大于等于 0
left 大于等于 0
bottom 小于等于視窗高度
right 小于等于視窗寬度

實現(xiàn)代碼如下：

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();
  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

例子

// 列表數(shù)據(jù)
 // 行
<div v-for="(row, indexs) in items" :key="indexs" class="rowList" >
  <div v-for="(column, index) in coluData" :key="index" class="coluList">   // 列
    <div class="images">
       <img class="lazyImg" slot="reference" :src="logo" :data-src="row[column.columnName]" alt="" />
    </div>
  </div>
</div>
// 在生命周期中定義滾動事件
    mounted() {
      window.addEventListener('scroll', this.lazyload)
    },
    destroyed() {
      window.removeEventListener('scroll', this.lazyload)
    },
    mothods:{
      getListData(){
          this.items = getData // getdata請求到的列表數(shù)據(jù)
          this.$nextTick(()=>{
              this.lazyload()
          })
      },
      // 圖片懶加載
      lazyload(){
        let n = 0;
        let img = document.getElementsByClassName('lazyImg')
        for(let i = n; i < img.length; i++){
          if(this.isInViewPort(img[i])){     
            img[i].src = img[i].getAttribute("data-src");
            n = i + 1;
          }
        }
      },
      isInViewPort(element) {
        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
        const {
          top,
          right,
          bottom,
          left,
        } = element.getBoundingClientRect();
        return (
          top >= 0 &&
          left >= 0 &&
          right <= viewWidth &&
          bottom <= viewHeight
        );
      },
}

以上就是詳解JS如何處理可視區(qū)域圖片懶加載技巧的詳細內(nèi)容，更多關于JS可視區(qū)域圖片懶加載的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: