使用Fslightbox时如何为<a>标签设置WebP图片的备选链接？

实现思路 #

Fslightbox默认读取<a>标签的href属性作为大图地址，而<a>本身不支持多格式资源备选，因此我们通过「浏览器WebP支持检测 + 动态赋值href」的方式实现兼容，无需修改Fslightbox源码，侵入性极低。

步骤1：修改HTML结构 #

给灯箱触发链接新增两个自定义属性，分别存储WebP和JPG格式的大图地址，href暂时填占位符即可：

<a data-lightbox data-webp="images/image.webp" data-jpg="images/image.jpg" href="#"> 
  <picture>
    <source srcset="images/image-thumbnail.webp" type="image/webp">
    <source srcset="images/image-thumbnail.jpg" type="image/jpeg">
    <img src="images/image-thumbnail.jpg" loading="lazy">
  </picture>
</a>

步骤2：关闭Fslightbox自动初始化（仅自动初始化场景需要） #

如果你引入Fslightbox脚本后它会自动初始化，需要先关闭自动初始化，确保我们给href赋值完成后再初始化灯箱，在引入Fslightbox脚本前添加如下代码：

<script>
window.fsLightboxAutoInit = false;
</script>
<script src="你站点的fslightbox.js路径"></script>

步骤3：添加WebP检测与动态赋值逻辑 #

// 检测浏览器是否支持WebP格式
function checkWebpSupport() {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    // 1x1像素的WebP测试图base64
    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
  });
}

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', async () => {
  const isWebpSupported = await checkWebpSupport();
  // 遍历所有灯箱触发链接，赋值对应格式的大图地址
  document.querySelectorAll('a[data-lightbox]').forEach(link => {
    link.href = isWebpSupported ? link.dataset.webp : link.dataset.jpg;
  });
  // 手动初始化Fslightbox
  new FsLightbox();
});

补充说明 #

• 该方案不会影响原有<picture>标签的缩略图多格式兼容逻辑
• 如果站点只有少量灯箱图片，也可以单独给对应<a>绑定点击事件判断赋值，不需要全局遍历所有灯箱元素

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