【JavaScript】实现懒加载的两种方式

前言

懒加载是一种优化网页性能的前端技术，它的主要目的是按需加载页面资源，而不是一次性加载所有内容。这种方法通过推迟加载页面中的资源（如图片）来减少初始页面加载时间，从而减轻服务器负担和带宽压力，加快页面加载速度。

例如，在开发图片数量众多的长网页时，通常先加载视口内的几张图片。随着用户滚动页面，位于视口外的图片会在滚动到其位置时才加载。这种方式就是懒加载。

实现懒加载的方法通常有两种：
一种是通过监听onscroll事件，另一种是使用IntersectionObserver接口。IntersectionObserver是实现懒加载的一种更现代和高效的方法，它可以自动检测元素是否进入了视口区域。

监听onscroll属性实现

首先，先了解三个参数

• clientHeight：浏览器视口的高度
• scrollTop：滚动轴滚动的距离
• offsetTop：图片的头部距离浏览器顶部的高度（注意不是距离视口顶部的高度）

代码实现

const imgs = document.querySelectorAll('img');
const lazyLoad = () =>{
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  let winTop = window.innerHeight; 
  for(let i=0 ;i < imgs.length; i++){
    // 此时加载图片
    if(imgs[i].offsetTop < scrollTop + winTop ){
      imgs[i].src = imgs[i].getAttribute('data-src');
    } 
  }
}
window.onscroll = lazyLoad

原理
用一张网上找的图片

IntersectionObserver实现

官方解释

IntersectionObserver 接口（从属于 Intersection Observer
API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）

用法非常简单。

let ob = new IntersectionObserver(callback, option);

接收两个参数：

callback 第一个参数回调函数，是由被观察元素可见性变化时触发的（必填），具体参数的话可以查阅官方文档。

option 第二个参数是一个配置对象（选填）。

实现懒加载

有时，我们希望某些静态资源（比如图片），只有用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能。这就叫做"懒加载"。
之前我们都是通过 scroll 事件配合 图片距离顶部的距离 实现的，现在我们利用 IntersectionObserver 这一个api 就可以轻松实现。

// 获取DOM元素
let main = document.querySelector('.layload main');
let footer = document.querySelector('.layload footer');
​
// 新建 IntersectionObserver 的实例
let observer = new IntersectionObserver(entries => {
    entries.forEach(item => {
        // 一旦元素可见，调用插入图片的函数 imgLoad()
        if (item.isIntersecting) {
            imgLoad();
        }
    })
})
observer.observe(footer); // 添加被观察的元素
​
​
​
let df = document.createDocumentFragment();
function imgLoad () {
    // 利用setTimeout 模拟异步请求
    setTimeout(() => {
        for (let i = 0; i < 9; i++) {
            let img = document.createElement('img');
            img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F20%2F20160820150344_wC4fk.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651400145&t=a7b3a0cbce5110c667c44a3bd2fdb280';
            df.appendChild(img);
        }
        main.appendChild(df);
    }, 500)
}