實現圖片懶載入的三種方式

linliqzh發表於2018-06-26

實現思路

  • 在頁面放置img標籤
  • 給img圖片加上alt, width, height 和 data-src
  • 通過js判斷頁面是否滾動到某張圖片需要顯示的位置，這時將src賦值為data-src

offsetTop方式

圖片出現在視窗內的情況： offsetTop < clientHeight + scrollTop

實現圖片懶載入的三種方式

getBoundingClientRect方式

圖片出現在視窗內的情況： element.getBoundingClientRect().top < clientHeight

h5的IntersectionObserver方式

  • intersectionRatio：目標元素的可見比例，即 intersectionRect 佔 boundingClientRect 的比例，完全可見時為 1 ，完全不可見時小於等於 0

具體用法如下：

function getTag(tag) {
    return Array.from(document.getElementsByTagName(tag));
}
var observer = new IntersectionObserver(
    (changes) => {
        changes.forEach((change) => {
            if (change.intersectionRatio > 0) {
                var img = change.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        })
    }
)
getTag('img').forEach((item) => {
    observer.observe(item);
})
複製程式碼

優化

  • 通過以下css可以提高效能
  # 之所以使用visibility而不是display是因為
  # visibility不會觸發重繪(repaint)和重排(reflow)
  img {
    visibility: hidden;
  }
  
  img[src] {
    visibility: visible;
  }
複製程式碼
  • 因為scroll事件的觸發頻率很高，頻繁操作dom結點會造成很大的效能問題，所以需要做節流和防抖設計，減少scroll事件的觸發頻率

相關文章