如何利用content-visibility阻止屏幕外内联图片加载？

给元素设置content-visibility: auto;后，期望屏幕外的内联base64背景图能像URL引用图片一样延迟加载，但实际页面中这些图片仍会直接加载。

代码示例 #

<div
  style="content-visibility: auto; aspect-ratio:2609 / 1598; background-image:url(data:image/avif;base64,AAAAHGZ0eXBhdmlmAA...EgAAAAAAAAA=);background-size:100% 100%;"
>
  ...
</div>

问题细节 #

设置content-visibility: auto后，屏幕外的data:image格式背景图并未按预期延迟加载，浏览器Network标签显示这些图片在页面加载时就已全部加载完成。需求是让这类内联图片仅在元素被判定为可见时才开始加载。

原因与解决方案 #

原因 #

content-visibility: auto的延迟加载逻辑仅针对外部URL资源。base64编码的data:image属于内联资源，会随着HTML解析直接被解码处理，不会触发浏览器的网络请求延迟机制，因此无法通过content-visibility直接实现懒加载。

解决方案 #

1. 替换为外部图片URL：将base64图片转为外部资源，利用content-visibility: auto原生的延迟加载能力。
2. JS动态设置背景图：结合Intersection Observer API监听元素可见性，当元素进入视口时，再将base64内容赋值给background-image属性。示例代码如下：

// 获取目标元素
const targetElements = document.querySelectorAll('.lazy-bg');

// 创建观察者实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，设置背景图
      const base64Img = 'data:image/avif;base64,AAAAHGZ0eXBhdmlmAA...EgAAAAAAAAA=';
      entry.target.style.backgroundImage = `url(${base64Img})`;
      // 停止监听该元素
      observer.unobserve(entry.target);
    }
  });
});

// 监听所有目标元素
targetElements.forEach(el => observer.observe(el));

对应的HTML结构需添加类名：

<div class="lazy-bg" style="content-visibility: auto; aspect-ratio:2609 / 1598; background-size:100% 100%;">
  ...
</div>

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