zoukankan      html  css  js  c++  java
  • [Javascript] IntersectionObserver -- Lazy Load Images on a Website

    When it comes to websites performance is king. How long it takes for a page to load can mean the difference of millions of dollars for large ecommerce sites. In this lesson we'll use the IntersectionObserver to check when an image is in the viewport to defer loading the image.

      document.addEventListener('DOMContentLoaded', () => {
          const lazyImages = Array.from(document.querySelectorAll('img.lazy'));
    
          if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
              // Define the observer
              let lazyImageObserver = new IntersectionObserver((entries, observer) => {
                  entries.forEach((entry) => {
                      // logic for handling interstion
                      if (entry.isIntersecting) {
                          let lazyImage = entry.target
                          lazyImage.src = lazyImage.dataset.src
                          lazyImage.srcset = lazyImage.dataset.srcset
                          lazyImage.classList.remove('lazy')
                          lazyImageObserver.unobserve(lazyImage)
                      }
                  })
              })
    
              // What to observe
              lazyImages.forEach(lazyImage => {
                  lazyImageObserver.observe(lazyImage)
              })
          } else {
    
          }
      })

    https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

    https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility

    We can add some Margin to preload image even before we scroll to the image:

              let lazyImageObserver = new IntersectionObserver((entries, observer) => {
                  entries.forEach((entry) => {
                      // logic for handling interstion
                      if (entry.isIntersecting) {
                          let lazyImage = entry.target
                          lazyImage.src = lazyImage.dataset.src
                          lazyImage.srcset = lazyImage.dataset.srcset
                          lazyImage.classList.remove('lazy')
                          lazyImageObserver.unobserve(lazyImage)
                      }
                  })
              }, {
                 rootMargin: '50px'
              })    

    rootMargin  Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.

  • 相关阅读:
    费用流
    平面最近点对
    纸牌均分问题
    cdq分治模板
    费解的开关
    斐波那契和排列组合性质
    主席树
    Springboot使用EasyExcel(仅限自己收藏)
    vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)
    vue路由参数的获取、添加和替换
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9010725.html
Copyright © 2011-2022 走看看