图片懒加载与预加载优化技巧

图片懒加载与预加载是前端性能优化中高效且实用的双重策略：懒加载借助 Intersection Observer API 智能延迟加载视窗外图片，大幅减少首屏请求和带宽消耗；预加载则在空闲时段或用户行为预判下提前获取关键资源，消除后续等待感；二者协同——首屏直出、非首屏懒载、临近区域预热，并辅以占位图、尺寸声明和CLS优化——不仅能显著提升页面加载速度与响应流畅度，还能改善核心Web指标和用户真实体验，是现代Web开发中投入产出比极高的必备实践。

图片的懒加载和预加载是提升网页性能的关键手段。懒加载延迟加载视窗外的图片，减少初始资源请求；预加载则提前加载重要资源，提升后续体验。两者结合使用，能有效优化页面加载速度与用户体验。

图片懒加载：按需加载可视区域内的图片

懒加载的核心思想是：只有当图片即将进入或已进入用户视口时，才开始加载其真实图片资源，避免一次性加载大量隐藏图片造成性能浪费。

实现方式通常依赖 Intersection Observer API，它比传统的 scroll 事件监听更高效、性能更好。

示例代码（懒加载）：

给 img 标签设置一个占位属性，比如 data-src 存放真实图片地址，src 指向一个极小的占位图或空白。

<img class="lazy" data-src="/path/to/image1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="图片1">

JavaScript 实现观察并加载：

document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll(".lazy");

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.dataset.src;

        if (src) {
          img.src = src;
          img.classList.remove("lazy");
        }
        observer.unobserve(img);
      }
    });
  });

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

说明：

• 使用 data-src 存储真实图片路径
• IntersectionObserver 监听元素是否进入视口
• 一旦进入，替换 src 并停止观察，避免重复触发

图片预加载：提前加载关键资源

预加载适用于那些用户大概率会访问的内容，比如轮播图的下一张、文章末尾的重要配图等。通过提前加载，减少等待时间，提升流畅度。

示例代码（预加载单张图片）：

function preloadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
    img.src = src;
  });
}

// 使用
preloadImage('/path/to/important-image.jpg')
  .then(img => console.log('预加载完成:', img))
  .catch(err => console.error(err));

批量预加载多张图片：

function preloadImages(sources) {
  const promises = sources.map(src => preloadImage(src));
  return Promise.all(promises);
}

// 调用
preloadImages([
  '/img/slide1.jpg',
  '/img/slide2.jpg',
  '/img/banner.jpg'
]).then(() => {
  console.log('所有关键图片已预加载');
});

建议时机：

• 页面空闲时（可结合 requestIdleCallback）
• 用户操作前（如点击“下一页”前预加载下几页资源）
• 网络状态良好时优先执行

实际应用中的优化建议

结合懒加载与预加载，可以设计更智能的图片加载策略：

• 首屏图片不懒加载，直接正常加载以保证快速呈现
• 非首屏图片使用懒加载，配合 Intersection Observer
• 在用户浏览接近某区域前，预加载该区域图片（例如滚动到某位置时触发预加载）
• 使用低分辨率占位图（blurry placeholder）提升感知性能
• 为懒加载图片设置宽高，防止布局偏移（CLS 优化）

注意兼容性：

IntersectionObserver 在较老浏览器中不支持，可引入 polyfill 或降级使用 scroll + getBoundingClientRect 判断。

基本上就这些。合理运用懒加载与预加载，既能减轻服务器压力，又能显著提升用户体验，是前端性能优化中性价比极高的实践。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。