【前端如何实现图片懒加载？】

前端如何实现图片懒加载？

前言

图片懒加载是一种优化网页性能的技术，通过延迟加载页面中的图片，减少初始页面加载时间，提升用户体验。本文将详细介绍图片懒加载的实现方法、最佳实践以及在实际开发中的应用。

---

关键词

图片懒加载、性能优化、Intersection Observer、data-src、loading=“lazy”、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实践

---

一、懒加载基础

1.1 懒加载的定义

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

1.2 懒加载的工作原理
初始加载：页面加载时，只加载可见区域的图片

滚动触发：当用户滚动页面时，加载进入视口的图片

延迟加载：减少初始页面加载时间，提升性能

二、实现方法

2.1 使用 Intersection Observer

document.addEventListener("DOMContentLoaded", function() {
   
  const lazyImages = document.querySelectorAll('img.lazyload');
  
  const observer = new IntersectionObserver((entries, observer) => {
   
    entries.forEach(entry => {
   
      if (entry.isIntersecting) {
   
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazyload');
        observer.unobserve(img);
      }
    });
  })