Lazy loading of images

What is lazy loading of pictures?

Image lazy loading is an operation that requests image resources only when the user slides to the specified image location. The goal is to slow down page initialization so that the user does not send a request for an image resource without swiping to the specified image.

Image lazy loading principle?

As we all know, HTTP requests for image resources cannot be manually controlled, and when an IMG element has a SRC attribute, the request is sent immediately upon page initialization. So if you want to control when a request is sent, you can only initialize it by not writing the SRC attribute, and add the SRC attribute to the IMG element when the specified condition is triggered. In this way, the basic operation of lazy image loading is realized. Lazy loading can be implemented by pre-setting a custom attribute for elements that need lazy loading, such as , and then setting the value of the custom attribute to the SRC attribute of the element when the image is displayed in the visible area.

Specific implementation steps:

  1. Get all the image elements we need to lazily load first

    // This is my fetch, please use your own selector to fetch
const imgs = document.querySelectorAll<HTMLImageElement>('#list>li>img[data-src]')
Copy the code

  2. Create an observation instance and specify the callback when the observation object (element) fires

    const obs = new IntersectionObserver(callback)
Copy the code

  3. Loop through the image element that you want to monitor, and then observe that element through the Observer method of the OBS instance

    imgs.forEach((img) = > {
// An element monitored by Observe fires once when it is visible and when it is not
    obs.observe(img)
})
Copy the code

  4. Defines the callback that fires when the target element intersects the root of the observed object (see the element or from see to leave)

    const callback = (entries: IntersectionObserverEntry[]) = > {
    The argument to the callback is an array of observation objects, that is, all observation objects that are currently fired
    // 4.1 Loop through the observed object to determine whether the observed object is in the visible area
    entries.forEach((entrie) = > {
      // Observe the isIntersecting method of the object to determine whether it is in the visible area of the window
      if (entrie.isIntersecting) {
        /* 4.2 Set the SRC attribute of the image element to the value of data-src when it is determined that the object to be observed is in the visible area to achieve lazy loading */
        const data_src = entrie.target.getAttribute('data-src')
        const img = entrie.target
        img.setAttribute('src', data_src)
        // 4.3 Stop observing the element if the element is no longer needed after the setting
        observer.unobserve(img)
      }
    })
  }
Copy the code

In real time, you can realize the lazy loading of pictures.