HTML loading="lazy"属性问题：打印时如何加载未完成懒加载的图片？

该方案可在保留页面原生懒加载性能优势的前提下，用户触发打印时自动加载所有未加载的懒加载图片，保证打印内容完整。

核心实现代码 #

// 存储懒加载图片批量加载的Promise实例，避免重复执行
let lazyImgLoadPromise = null;

// 预加载所有配置了loading="lazy"的未加载图片
function preloadAllLazyImages() {
  if (lazyImgLoadPromise) return lazyImgLoadPromise;

  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
  const loadTaskList = [];

  lazyImages.forEach(img => {
    // 已加载完成的图片直接跳过
    if (img.complete) return;

    loadTaskList.push(new Promise((resolve) => {
      // 图片加载成功/失败都标记为完成，不阻塞打印流程
      img.onload = img.onerror = resolve;
      // 移除懒加载属性强制触发加载
      img.removeAttribute('loading');
      // 兼容部分浏览器需要重新赋值src才会触发请求的逻辑
      img.src = img.src;
    }));
  });

  lazyImgLoadPromise = Promise.all(loadTaskList);
  return lazyImgLoadPromise;
}

// 监听系统打印事件（浏览器自带打印快捷键/右键打印触发）
if ('onbeforeprint' in window) {
  window.addEventListener('beforeprint', preloadAllLazyImages);
} else {
  // 兼容不支持beforeprint事件的浏览器
  const printMediaQuery = window.matchMedia('print');
  printMediaQuery.addEventListener('change', (event) => {
    if (event.matches) preloadAllLazyImages();
  });
}

// 适配页面自定义打印按钮的场景，调用示例：<button onclick="manualPrint()">打印</button>
window.manualPrint = async function() {
  await preloadAllLazyImages();
  window.print();
}

注意事项 #

• 该方案仅在打印事件触发时才会批量加载剩余懒加载图片，不影响正常浏览场景下的懒加载效果
• 代码已做兼容处理，图片加载失败不会阻塞打印流程
• 若页面存在大量未加载的高清图片，打印预览可能出现短暂等待，属于正常现象
• 若你使用的是自定义懒加载逻辑而非原生loading="lazy"属性，只需将preloadAllLazyImages函数内的选择器和加载逻辑替换为自定义逻辑即可（比如将data-src属性值赋值给src属性）

内容的提问来源于stack exchange，提问作者Fredy31