原生JS實現圖片懶加載之一：Element.getBoundingClientRect()

實際項目開放中，特別是電商項目，因爲有大量的圖片加載必然會影響性能，因此實現圖片的懶加載是很是有必要的。

實現圖片懶加載的知識點

標籤的data-屬性

可視區域的監聽

 實現圖片懶加載的原理

<img alt="loading..." data-src="images/1.jpg">
當咱們監聽到圖片進入可視區域後，就將data-src到值賦值給src屬性
<script>
    var images = document.querySelectorAll('img');
   //ES6方法，也能夠直接使用for語句
    Array.from(images).forEach((el)=>{
       el.src = el.dataset.src;
    })
</script>

 Element.getBoundingClientRect()方法

rectObject = object.getBoundingClientRect();

 返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合 。DOMRect 對象包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，單位爲像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

經過這個API，咱們就很容易獲取img元素相對於視口的頂點位置"rectObject.top"，只要這個值小於瀏覽器的高度（window.innerHeight）就說明進入可視區域。若是要提早加載，能夠添加將瀏覽器的高度加值。

function isInSight(el){
      const bound = el.getBoundingClientRect();
      const clientHeight = window.innerHeight;
      return bound.top <= clientHeight + 100;
    }

 實現圖片加載

 function loadImg(el){
      if(!el.src){
        const source = el.dataset.src;
        el.src = source;
      }
    }

 將判斷進入可視區域的函數與加載圖片的函數放入頁面函數，在頁面加載與滾動的時候調用函數

function checkImgs(){
      const imgs = document.querySelectorAll('li img');
      Array.from(imgs).forEach(el =>{
        if (isInSight(el)){
          loadImg(el);
        }
      })
    }
    window.onload = function(){
      checkImgs();
    }
     document.onscroll = function () {
        checkImgs();
      }

 到這裏就完成了圖片懶加載，但會存在一些性能問題，好比：加載過的圖片不須要在遍歷了、兩次滾動時間間隔很短（抖動問題）。這些優化問題就不在這兒寫了，之後有時間再補上去。接下來會寫另外一個ES6實現圖片懶加載的API——「IntersectionObserver」，這個API實現性能會更好。