利用原生JS实现懒加载lazyLoad的三种方法总结

目录

• 前言
• Method 1: 高度对比
• Method 2: 使用getBoundingClientRect() 的API
• Method 3: 采用最新的 IntersectionObserver 构造函数
• 总结

<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; // 浏览器可视区的高度
      var sheight = document.documentElement.scrollTop; // 页面被卷去的高度
      if (height - sheight <= wheight) { // 判断图片是否将要出现
        imgs[i].src = imgs[i].dataset.src; // 出现后将自定义地址转为真实地址
      }
    }
  }

 /**
  * 方法二
  * @params getBoundingClientRect()
  * 可视区API
  */
 let imgs = [...document.querySelectorAll('img')];
 window.addEventListener('scroll', function () {
    imgs.forEach(img => { 
      //这里其实和Method1的思想一样,不过就是简洁了一些
      if (img.getBoundingClientRect().top < window.innerHeight) { 
        let dataSrc = img.getAttribute(' data-src'); // 获取 data-src 真实的地址
        img.setAttribute('src', dataSrc); // 将 真实的地址 替换为 src属性
        console.log(img.src);
      }
    })
  })

window.addEventListener('scroll', function () {
// 首先我们先实例化这个构造函数
   const observe = new IntersectionObserver(callback);
// 然后写我们需要处理业务的回调函数 callback
   const callback = entries => {
        console.log(entries); //我们先打印一下 entries 看看有什么用 
        // 如下图
    };
}

window.addEventListener('scroll', function () {
   const observe = new IntersectionObserver(callback);
// 然后写我们需要处理业务的回调函数 callback
   const callback = entries => {
       // 我们发现它是个数组,于是
       entries.forEach(ele => {
           console.log(ele); // 我们再打印一下元素,看看元素里面有什么
           // 如下图
       })
    };
}

 /**
  * 方法三
  * @params   new IntersectionObserver(callback[,options])
  * 观察-->构造函数
  */
  window.addEventListener('scroll', function () {
    let imgs = [...document.querySelectorAll('.img')]
    const callback = entries => { // entries 是观察的元素数组
        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 是目标元素
                observe.unobserve(ele.target) // 真实地址替换后 取消对它的观察
            }
        })
    };
    const observe = new IntersectionObserver(callback); // 实例化 IntersectionObserver
    imgs.forEach(image => { 
        observe.observe(image) // observe : 被调用的IntersectionObserver实例。给每个图片添加观察实例
    })
  }