Brief introduction: First, the SRC attribute of the picture on the page is set as an empty string, and the real path of the picture is set in the data-src attribute, to judge whether the lazy loaded picture enters the visible area. If the SRC attribute of the picture is set to the value of data-src in the visible area, then lazy loading can be realized.

Implementation steps

  • The Intersection Observer listens to see if the image is in view.

  • In the IMG tag we define the data-src attribute to hold the real address of the real image, and the SRC attribute to hold the image we replace.

  • When listening for the image DOM to enter the visible area, we change the SRC in imgDOM to the value in data-src. Then stop listening to elements IntersectionObserver. Unobserve (target);

  • Terminates the observation of changes in the visibility of all target elements when the component is unloaded. intersectionObserver.disconnect();

Code implementation

function lazyImg(dom) {
      const observer = new IntersectionObserver((entires) = > {
        entires.forEach(item= > {
          if (item.isIntersecting) {
            // Get the real image address
            const imgSrc = item.target.getAttribute("data-src");
            // Assign the image address to the SRC attribute.
            item.target.setAttribute("src", imgSrc)
            // Stop this element from listeningobserver.unobserve(item.target); }})})if (dom.length) {
        [...dom].forEach(item= >{ observer.observe(item) }); }}Copy the code

An example of lazy loading

  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/1.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/2.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/3.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/4.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/5.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/6.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/7.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/8.jpg">
  </div>
  <div>
    <img class="img" src="./img/zhenshang.png" data-src="./img/9.jpg">
  </div>
  <script>
    function lazyImg(dom) {
      const observer = new IntersectionObserver((entires) = > {
        entires.forEach(item= > {
          if (item.isIntersecting) {
            // Get the real image address
            const imgSrc = item.target.getAttribute("data-src");
            // Assign the image address to the SRC attribute.
            item.target.setAttribute("src", imgSrc)
            // Stop this element from listeningobserver.unobserve(item.target); }})})if (dom.length) {
        [...dom].forEach(item= >{ observer.observe(item) }); }}// Get the image DOM element
    const imgDom = document.getElementsByClassName("img");
    lazyImg(imgDom)
  </script>
Copy the code