能否自定义图片加载逻辑同时使用`img.loading`原生懒加载？

方案2是完全可行的，核心思路是利用Chrome原生懒加载的loading="lazy"触发时机，通过拦截浏览器的原生图片加载流程，替换成你的自定义API请求逻辑。

实现步骤 #

1. HTML结构设置
   给图片添加自定义属性（比如data-img-id）存储图片的唯一标识，同时开启原生懒加载，src设为1x1的空白base64占位图（避免浏览器报错或布局偏移）：

<img loading="lazy" data-img-id="your-image-id" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="图片描述">

注意：给图片设置固定宽高或通过CSS指定尺寸，防止加载时的布局偏移。

2. 拦截原生加载流程
   使用beforeload事件在浏览器发起原生资源请求前接管加载逻辑，这个事件会在原生懒加载触发时同步触发：

// 全局监听beforeload事件（需用捕获阶段）
document.addEventListener('beforeload', function(e) {
  const img = e.target;
  // 只处理启用原生懒加载且带自定义标识的图片
  if (img.tagName === 'IMG' && img.loading === 'lazy' && img.hasAttribute('data-img-id')) {
    // 阻止浏览器默认加载行为
    e.preventDefault();
    
    // 获取图片标识
    const imgId = img.getAttribute('data-img-id');
    
    // 调用自有API获取二进制数据并转为base64
    fetch(`/your-api-path/${imgId}`)
      .then(res => res.blob())
      .then(blob => {
        const reader = new FileReader();
        reader.onload = () => {
          // 设置base64格式的src
          img.src = reader.result;
        };
        reader.readAsDataURL(blob);
      })
      .catch(err => {
        console.error('图片加载失败:', err);
        // 加载失败时设置错误占位图
        img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
      });
  }
}, true);

关键说明 #

• beforeload事件的特性：它在浏览器发起资源请求前触发，能完美匹配原生懒加载的触发时机，不需要自己监听滚动或Intersection Observer，完全复用浏览器的原生优化策略（比如根据网络、设备性能调整加载时机）。
• 兼容性：Chrome、Edge等现代浏览器原生支持beforeload，Firefox需手动开启dom.image.beforeload.enabled配置；如果需要兼容更多浏览器，可以在代码中增加Intersection Observer的降级逻辑，但核心仍可保留原生懒加载的属性。

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