如何实现lightbox灯箱序列内的图片仅在可见时加载？

方案1：低成本实现（灯箱打开时加载当前序列所有图片） #

实现成本最低，仅需修改少量代码即可达成目标：

• 先把所有非首图的序列链接href属性替换为自定义属性data-src，避免页面初始化时lightbox自动读取href预加载全量资源
  修改后的代码示例：

<a href="../img/image_A_large" rel="lightbox[sequence_A]" data-title="© 2021">
   <img src="../img/image_A_small.jpg">
   <h2>Images</h2>
</a>
<a data-src="../img/image_B.jpg" rel="lightbox[sequence_A]" data-title="© 2021"></a>
<a data-src="../img/image_C.jpg" rel="lightbox[sequence_A]" data-title="© 2021"></a>
<a data-src="../img/image_D.jpg" rel="lightbox[sequence_A]" data-title="© 2021"></a>
<!-- 其余序列项同理替换href为data-src -->

• 绑定lightbox的打开回调事件，触发时批量获取当前序列所有链接的data-src值，回写到href属性，再调用lightbox的序列刷新方法即可。主流lightbox库都提供了对应的打开事件钩子，直接在回调中处理即可。
• 优势：代码改动量极小，不需要调整lightbox核心逻辑，即可解决页面初始化加载过多无用资源的问题。

方案2：极致按需加载（仅灯箱内可见的图片加载） #

如果要进一步压缩带宽占用，可以采用可见才加载的逻辑：

• 第一步和方案1一致，将非首图的资源地址存到data-src中
• 监听lightbox的图片切换事件，每次切换到第N张图时，才将第N张的data-src赋值到href触发加载；可以额外预加载N+1张图，避免用户切换下一张时出现空白等待
• 如果所用的lightbox支持自定义资源加载逻辑，也可以直接在加载钩子中判断资源是否属于即将展示的范围，非展示范围内的拦截加载请求即可
• 优势：带宽占用最低，只有用户实际浏览到的图片才会加载，适合单序列图片数量较多的场景。

可选优化项 #

• 所有大图元素添加loading="lazy"属性，即使批量赋值了href，浏览器也会自动调度加载优先级，不会阻塞页面核心资源加载
• 给序列大图配置合理的HTTP缓存头，用户重复打开同一灯箱序列时不需要重复加载资源
• 页面核心资源加载完成后，可以在空闲时间预加载序列首图的大图资源，提升用户第一次点击小图时的打开速度

内容的提问来源于stack exchange，提问作者Jeroen van den Heuvel