HTML5 Intersection Observer实战：高性能图片懒加载系统开发指南

文章小助手 vue2

2025-07-20 0 575

HTML5 Intersection Observer实战：高性能图片懒加载系统

一、技术方案对比

传统懒加载

scroll事件监听
频繁DOM操作
性能开销大
兼容性一般

Observer方案

异步观察机制
零事件监听
极低性能消耗
现代浏览器支持

二、核心实现代码

1. HTML标记结构

<div class="image-container">
  <img class="lazy" 
       data-src="image1.jpg" 
       data-srcset="image1-480.jpg 480w, image1-800.jpg 800w"
       alt="示例图片1">
  <img class="lazy"
       data-src="image2.jpg"
       data-srcset="image2-480.jpg 480w, image2-800.jpg 800w" 
       alt="示例图片2">
</div>

2. Intersection Observer实现

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img.lazy');
  
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        
        if (img.dataset.srcset) {
          img.srcset = img.dataset.srcset;
        }
        
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  }, {
    rootMargin: '200px 0px',
    threshold: 0.01
  });

  lazyImages.forEach(img => imageObserver.observe(img));
});

3. 响应式图片处理

function initResponsiveImages() {
  const sources = document.querySelectorAll('source[data-srcset]');
  
  const sourceObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const source = entry.target;
        source.srcset = source.dataset.srcset;
        sourceObserver.unobserve(source);
      }
    });
  });
  
  sources.forEach(source => sourceObserver.observe(source));
}