原生js实现图片懒加载
Published on Jan 30, 2023, with 11 view(s) and 0 comment(s)
Ai 摘要：本文介绍了图片懒加载的原理与实现方法。懒加载通过仅加载可视区域内的图片，减少服务器压力、避免请求阻塞，提升页面加载速度和用户体验。其核心原理是监听滚动事件，判断图片是否进入可视区域后动态设置src属性。文中提供了Vue环境下的实现代码，包括可视区域判断、图片加载逻辑及防抖优化，适用于图片密集型网站的性能优化。

图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

优点：

  • 减少资源的加载，页面启动只加载首屏的图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。

  • 防止并发加载的资源过多而阻塞 js 的加载，影响整个网站的启动。

  • 能提升用户的体验，不妨设想下，用户打开页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长这就严重影响用户体验。

原理：图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的。

  • 拿到所有的图片 dom 。

  • 遍历每个图片判断当前图片是否到了可视区范围内。

  • 如果到了就设置图片的 src 属性。

  • 绑定 window 的 scroll 事件，对其进行事件监听。

代码实现：这里是在vue中封装的一个方法，传入的是一个图片容器的集合。

export function isView(ref) {
  //判断元素是否进入可视区域
  const isInSight = (item) => {
    const bound = item.getBoundingClientRect();
    const clientHight = window.innerHeight;
    return bound.top <= clientHight + 50 && item.querySelector("img").getAttribute("src") == undefined;
  };

  //加载根据isInSight方法返回值判断是否进入可视区域，从而把获取图片的路径，赋值给src，这里是先把图片地址赋值给了data-src
  const lazyLoad = () => {
    for (let item of ref.value) {
      const imgEl = item.querySelector("img");
      if (isInSight(item)) {
        imgEl.setAttribute("src", imgEl.getAttribute("data-src"));
      }
    }
  };

  //当鼠标页面滚动时执行懒加载方法，这里可以进行debounce来减少运算，提升性能
  window.onscroll = debounce(() => {
    lazyLoad();
  }, 100);
}