懒加载

首先我们先搭建好页面:

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

我们知道,图片懒加载是在滚动条向下滚动时,才判断图片是否到达可视区域 于是我们需要在滚动监听时判断图片是否即将显示,所以我们需要将图片的真实地址先隐藏起来,即采用自定义属性 data-src 保存图片的真实地址,当滚动条滚动到图片能够看到时再加载真实的地址.

方法一 1: 高度对比

这里我们采用 (元素距顶部的高度 - 页面被卷去的高度 <= 浏览器可视区的高度) 来判断是否符合我们想要的条件.这里我们需要实时监听页面滚动时 图片的高度变化

/**
 * 方法一
 * 高度对比
 */
 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; // 出现后将自定义地址转为真实地址
      }
    }
  }

方法二: 使用getBoundingClientRect() 的API

先附上MDN 对getBoundingClientRect() 的解释 getBoundingClientRect()

我们可以通过 getBoundingClientRect().top来获取元素距视口顶部的距离,于是我们就可以比较getBoundingClientRect().top 和 window.innerHeight 的值的关系来实现懒加载的效果 这里使用了getAttribute() 和setAttribute() 属性

/**
  * 方法二
  * @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);
      }
    })
  })

方法三: 采用最新的 IntersectionObserver 构造函数

看过上面两种方法,那你是否觉得懒加载还挺简单的对吧?没错,我们写的代码很少,看起来很简单,但是我们忽略了一个重要的问题:图片替换为真实的地址之后,如果我们反复的拉动滚动条,会一直触发 if()条件。

那我们怎么去让图片真实地址加载完之后,不再触发对它的频繁操作呢?或者说怎么优化游览器的性能呢?

好巧不巧,现在有了一个新增的构造函数,来解决我们的频繁触发条件语句的问题.

这个构造函数就是 IntersectionObserver

根据 MDN 上的解释

IntersectionObserver()构造器创建并返回一个IntersectionObserver对象。 如果指定rootMargin则会检查其是否符合语法规定，检查阈值以确保全部在0.0到1.0之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个[0.0]的数组。

callback 当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：

          entries 一个IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。

          observer 被调用的IntersectionObserver实例。

//获取观察器实例  changes是被观察的对象数组
    var observer = new IntersectionObserver(function (changes) {
        changes.forEach(function (item,index) {
            console.log(item,index);
            if (item.intersectionRatio > 0 && item.intersectionRatio < 1)
                //target：被观察的目标元素，是一个 DOM 节点对象
                item.target.src = item.target.dataset.src;
        });
    });

    function addObserver() {
        var listItems = document.querySelectorAll('.img');
        listItems.forEach(function (item) {
            //实例的observe方法可以指定观察哪个DOM节点
            //开始观察  observe的参数是一个 DOM 节点对象
            observer.observe(item);
        });
    }
    addObserver();

这样处理,我们就可以不再频繁的去触发 if() 条件语句，因为在图片替换了真实地址后,我取消了对当前图片的观察，于是,当前图片已经没有事件再被触发，所以这样对浏览器的性能进行了极大的优化。