前端优化实战：巧用懒加载，提升页面性能

前端

2023-11-12 20:40:55

懒加载：按需加载，优化性能

在Web页面中，图片往往占据着较大的体积。当页面加载时，所有图片资源都会被一并加载，这会对页面加载速度造成影响，尤其是对于移动设备和网络条件较差的用户。

懒加载是一种按需加载的技术，它将页面中非立即需要的图片资源的加载延迟到用户滚动或与之交互时才进行。这样，页面在初始加载时只加载必要的资源，缩短了加载时间，提升了页面性能。

实战中的懒加载应用

原理及实现

懒加载的实现原理并不复杂。其核心在于利用元素的 Intersection Observer API，监听页面元素的可见性。当元素进入视口范围内时，触发图片的加载。

在实际应用中，可以通过以下步骤实现懒加载：

为需要懒加载的图片元素添加 lazyload 类名。
使用 Intersection Observer API 监听 lazyload 元素的可见性变化。
当 lazyload 元素进入视口范围内时，通过 src 属性设置图片的真实路径，完成图片加载。

实战示例

<img class="lazyload" data-src="image.jpg" alt="Example">

const lazyloadImages = document.querySelectorAll(".lazyload");
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
});

lazyloadImages.forEach((image) => {
  observer.observe(image);
});