Summary of three methods of lazy loading lazyLoad using native JS

<style>
    * {
      padding: 0%;
      margin: 0%;
    }

    .contain img {
      width: 600px;
      height: 400px;
    }

    ul {
      list-style: none;
    }

    li {
      display: inline-block;
    }
  </style>
  
  
  <div class="contain">
    <ul>
       <li><img data-src="./images/iu.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu1.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu2.png" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu3.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu4.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu5.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu6.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu7.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu8.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu9.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu10.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/zzf_01.jpg" src='./images/lazy.png' alt=""></li>
    </ul>
  </div
>

/**
 * Method 1 * Height Contrast */
 let imgs = [...document.querySelectorAll('img')]; // Get all the images first window.addEventListener('scroll', function () {
   
 })

 /**
  * Method 1 * Height Contrast */
  let imgs = [...document.querySelectorAll('img')]; // Get all the images first window.addEventListener('scroll', function () {
    lazyLoad(imgs)
  })
  function lazyLoad(imgs) {
    for (var i = 0; i < imgs.length; i++) {
      var height = imgs[i].offsetTop; // The height of the image from the top var wheight = window.innerHeight; // The height of the browser's visible area var sheight = document.documentElement.scrollTop; // The height of the page scrolled away if (height - sheight <= wheight) { // Determine whether the image is about to appear imgs[i].src = imgs[i].dataset.src; // Convert the custom address to the real address after it appears}
    }
  }

 /**
  * Method 2 * @params getBoundingClientRect()
  * Viewport API
  */

 let imgs = [...document.querySelectorAll('img')];
 window.addEventListener('scroll', function () {
    imgs.forEach(img => { 
      //This is actually the same idea as Method 1, but it is a little simpler if (img.getBoundingClientRect().top < window.innerHeight) { 
     
        let dataSrc = img.getAttribute(' data-src'); // Get the real address of data-src img.setAttribute('src', dataSrc); // Replace the real address with the src attribute console.log(img.src);
      }
    })
  })

window.addEventListener('scroll', function () {
// First, we instantiate this constructor const observe = new IntersectionObserver(callback);
// Then write the callback function callback we need to handle the business
   const callback = entries => {
        console.log(entries); //Let's print entries first to see what they are useful for //As shown below};
}

window.addEventListener('scroll', function () {
   const observe = new IntersectionObserver(callback);
// Then write the callback function callback we need to handle the business
   const callback = entries => {
       // We find it is an array, so entries.forEach(ele => {
           console.log(ele); // Let's print the element again to see what's inside it // as shown below})
    };
}

 /**
  * Method 3 * @params new IntersectionObserver(callback[,options])
  * Observation-->Constructor*/
  window.addEventListener('scroll', function () {
    let imgs = [...document.querySelectorAll('.img')]
    const callback = entries => { // entries is the observed element array entries.forEach(ele => {
            if (ele.isIntersecting) { // isIntersecting is observed const data_src = ele.target.getAttribute('data-src'); // This is basically the same as Method1/Method2 ele.target.setAttribute('src', data_src); // ele.target is the target element observe.unobserve(ele.target) // Unobserve it after the real address is replaced }
        })
    };
    const observe = new IntersectionObserver(callback); // Instantiate IntersectionObserver
    imgs.forEach(image => { 
        observe.observe(image) // observe: The IntersectionObserver instance being called. Add observation instances to each image})
  }