前端優化效能-1(lazy-img)

在Chrome底下可以使用在img DOM加入loading="lazy"就可以直接使用懶加載了,或者裝線上有的plugin也可以的(但是我喜歡自己來)

<img src="image.png" loading="lazy" alt="..." />

但IE跟Safari是不支援這樣的語法的,所以只好自己幹一個了,我們來用IntersectionObserver吧(結果IE 也沒支援attribute QAQ)

//註冊在讀取圖檔時要做的事情
window.addEventListener('load', () => {
      const watcher = new IntersectionObserver(onEnterView)
      const elementArrary = document.getElementsByClassName('your_imgName');
      for (let image of elementArrary) {
          watcher.observe(image) // 開始監視
      }
}
//IntersectionObserver 的call back
function onEnterView(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
    for (let entry of entries) {
		if (entry.isIntersecting) {
					// Element show on the  
              loadImage(entry.target)
					// cancel watch 
              observer.unobserve(entry.target)
          }
    }
}
// load img logic
function loadImage(img: HTMLImageElement) {
    const removeMockup = (event:any) => {
        const mockup = event.target.previousElementSibling
        mockup.addEventListener('transitionend', mockup.remove)
        mockup.classList.remove('loading')
        mockup.classList.add('fade-out')
    }
    if (img.previousElementSibling)
        img.previousElementSibling.classList.add('loading')
    img.setAttribute('src', img.src)
    img.removeAttribute('data-src')
    img.addEventListener('load', removeMockup)
}

小結:

其實整個邏輯就是先拿需要被懶加載的element→讓IntersectionObserver去觀察每個element→ 當element show在view上就執行IntersectionObserver的call back function去實作讀取圖片的邏輯,這邊不只可以做懶加載圖片的發法,例如在第三個element彈廣告OR發request要資料也可以