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

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

實現圖片懶加載的知識點

標籤的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 外的屬性都是相對於視口的左上角位置而言的。java

getBoundingClientRect示例圖

經過這個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實現性能會更好。優化

相關文章
相關標籤/搜索