<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
>

/**
 * 方法一
 * 高度對比
 */
 let imgs = [...document.querySelectorAll('img')]; // 先獲取所有的圖片
 window.addEventListener('scroll', function () {
   
 })

 /**
  * 方法一
  * 高度對比
  */
  let imgs = [...document.querySelectorAll('img')]; // 先獲取所有的圖片
  window.addEventListener('scroll', function () {
    lazyLoad(imgs)
  })
  function lazyLoad(imgs) {
    for (var i = 0; i < imgs.length; i++) {
      var height = imgs[i].offsetTop; // 圖片的距頂部的高度
      var wheight = window.innerHeight; // 瀏覽器可視區(qū)的高度
      var sheight = document.documentElement.scrollTop; // 頁面被卷去的高度
      if (height - sheight <= wheight) { // 判斷圖片是否將要出現(xiàn)
        imgs[i].src = imgs[i].dataset.src; // 出現(xiàn)后將自定義地址轉(zhuǎn)為真實(shí)地址
      }
    }
  }

 /**
  * 方法二
  * @params getBoundingClientRect()
  * 可視區(qū)API
  */

 let imgs = [...document.querySelectorAll('img')];
 window.addEventListener('scroll', function () {
    imgs.forEach(img => { 
      //這里其實(shí)和Method1的思想一樣,不過就是簡潔了一些
      if (img.getBoundingClientRect().top < window.innerHeight) { 
     
        let dataSrc = img.getAttribute(' data-src'); // 獲取 data-src 真實(shí)的地址
        img.setAttribute('src', dataSrc); // 將 真實(shí)的地址 替換為 src屬性
        console.log(img.src);
      }
    })
  })

window.addEventListener('scroll', function () {
// 首先我們先實(shí)例化這個(gè)構(gòu)造函數(shù)
   const observe = new IntersectionObserver(callback);
// 然后寫我們需要處理業(yè)務(wù)的回調(diào)函數(shù) callback
   const callback = entries => {
        console.log(entries); //我們先打印一下 entries 看看有什么用 
        // 如下圖
    };
}

window.addEventListener('scroll', function () {
   const observe = new IntersectionObserver(callback);
// 然后寫我們需要處理業(yè)務(wù)的回調(diào)函數(shù) callback
   const callback = entries => {
       // 我們發(fā)現(xiàn)它是個(gè)數(shù)組,于是
       entries.forEach(ele => {
           console.log(ele); // 我們再打印一下元素,看看元素里面有什么
           // 如下圖
       })
    };
}

 /**
  * 方法三
  * @params   new IntersectionObserver(callback[,options])
  * 觀察-->構(gòu)造函數(shù)
  */
  window.addEventListener('scroll', function () {
    let imgs = [...document.querySelectorAll('.img')]
    const callback = entries => { // entries 是觀察的元素?cái)?shù)組
        entries.forEach(ele => {
            if (ele.isIntersecting) { // isIntersecting  是否被觀察到
                const data_src = ele.target.getAttribute('data-src'); //這里基本和 Method1/Method2一樣
                ele.target.setAttribute('src', data_src); // ele.target 是目標(biāo)元素
                observe.unobserve(ele.target) // 真實(shí)地址替換后 取消對它的觀察
            }
        })
    };
    const observe = new IntersectionObserver(callback); // 實(shí)例化 IntersectionObserver
    imgs.forEach(image => { 
        observe.observe(image) // observe : 被調(diào)用的IntersectionObserver實(shí)例。給每個(gè)圖片添加觀察實(shí)例
    })
  }