网站图片懒加载基础方法

在当今追求极致用户体验的网站设计中，图片懒加载（Lazy Loading）已成为一项不可或缺的前端优化技术。它通过延迟加载非视口内的图片，有效提升了页面的加载速度与整体性能。本文将深入探讨图片懒加载的核心原理、几种基础实现方法以及其带来的显著优势。

懒加载的核心原理

懒加载技术的核心思想非常直观：仅加载用户当前可见或即将可见的图片。当一个包含大量图片的网页加载时，传统的做法是无论图片位于页面的哪个位置，浏览器都会立即请求并加载所有图片资源。这会导致不必要的网络请求、数据消耗以及漫长的等待时间，尤其是在图片体积庞大或网络状况不佳的情况下。

懒加载颠覆了这一过程。它的工作流程可以概括为：

动态加载：一旦检测到图片进入或即将进入视口，便将data-src中的真实URL赋值给src属性。此时，浏览器才会正式发起网络请求，加载并显示真实的图片。

三种基础实现方法

1. 基于原生JavaScript与滚动事件

这是最经典的方法，通过计算图片的位置来实现。

// 获取所有需要懒加载的图片const lazyImages = document.querySelectorAll('img[data-src]');// 监听滚动事件window.addEventListener('scroll', lazyLoad);function lazyLoad() {lazyImages.forEach(image => {// 判断图片是否进入视口if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom >= 0) {// 将 data-src 的值赋给 srcimage.src = image.dataset.src;// 加载完成后，移除 data-src 属性，避免重复加载image.addEventListener('load', () => {image.removeAttribute('data-src');});}});}// 初始加载时执行一次lazyLoad();

优点：兼容性好，适用于所有现代浏览器。缺点：需要手动计算元素位置，滚动事件触发频繁，若处理函数复杂可能引发性能问题（通常需要通过*函数节流*来优化）。

2. 使用现代的Intersection Observer API

这是目前*推荐使用*的方法，它提供了了一种更高效、性能更优的方式来异步观察目标元素与祖先元素或视口的交叉状态。

// 检查浏览器是否支持if ('IntersectionObserver' in window) {const lazyImageObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) { // 如果目标元素进入视口const lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove('lazy');// 图片开始加载后，停止观察lazyImageObserver.unobserve(lazyImage);}});});// 对所有带 data-src 的图片进行观察const lazyImages = document.querySelectorAll('img[data-src]');lazyImages.forEach(image => {lazyImageObserver.observe(image);});} else {// 浏览器不支持，回退到方法一// ... 此处可调用基于滚动事件的懒加载函数}

优点：性能卓越，代码简洁，无需担心滚动性能问题，原生支持异步观察。缺点：在部分旧版本浏览器中需要 polyfill 支持。

3. 使用纯HTML的loading="lazy"属性

最简单、最省事的方法是使用浏览器原生的懒加载支持。只需为或