js图片懒加载怎么实现

图片懒加载是一种优化网站性能的技术，通过仅加载用户当前可见的图片来提高页面加载速度、减少带宽消耗。 实现方式包括：

1. HTML5 Intersection Observer API：

   原理：Intersection Observer API 是一种原生 JavaScript API，用于检测元素是否进入可视区域。通过监听图片元素与视口的交叉状态，仅当图片进入可视区域时才触发加载。

   实现步骤：

   为图片设置 data-src 属性存储真实图片地址，src 属性设置为占位图或空。

   创建 Intersection Observer 实例，配置回调函数。

   在回调函数中，当图片进入视口时，将 data-src 的值赋给 src，触发图片加载。

   代码示例：const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); // 加载后停止观察 } });});document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img);});

2. 自定义 JavaScript 函数：

   原理：通过监听滚动事件，计算图片元素与视口的位置关系，判断是否需要加载。

   实现步骤：

   获取所有待加载图片（如带有 lazyload 类的图片）。

   监听 scroll 或 resize 事件，触发检查函数。

   在检查函数中，遍历图片，判断其是否进入视口（通过 getBoundingClientRect() 获取位置信息）。

   若图片在视口内，加载图片并移除监听（避免重复检查）。

   代码示例：function lazyLoad() { const images = document.querySelectorAll('img.lazyload'); images.forEach(img => { if (img.getBoundingClientRect().top < window.innerHeight) { img.src = img.dataset.src; img.classList.remove('lazyload'); } });}window.addEventListener('scroll', lazyLoad);window.addEventListener('resize', lazyLoad);lazyLoad(); // 初始加载可视区域图片

3. 第三方库：

   推荐库：

   Lazysizes：轻量级，支持响应式图片和占位符。

   lozad.js：基于 Intersection Observer，配置简单。

   picturefill：主要用于响应式图片（<picture> 元素），但也可结合懒加载。

   优势：提供占位符、自动初始化、兼容性处理等额外功能。

   示例（Lazysizes）：<img data-src="image.jpg" class="lazyload" /><script src="lazysizes.min.js"></script>

注意事项：

• 性能优化：避免频繁触发滚动事件（如使用节流函数）。
• 占位符：使用低质量占位图或骨架屏提升用户体验。
• 移动端适配：对低带宽设备尤为重要，需确保占位符足够小。
• 兼容性：Intersection Observer 需 polyfill 支持旧浏览器（如 IE）。

总结：

• 推荐方式：优先使用 Intersection Observer（性能最佳），其次为第三方库（功能丰富），最后是自定义函数（兼容性广但需优化）。
• 核心逻辑：延迟加载非可视区域图片，通过动态替换 src 实现按需加载。