本文讲解如何在 WordPress 图片画廊中，通过解析 标签的 srcset 属性自动获取最高分辨率（HD）原图 URL，并将其作为 Lightbox 的显示源，避免点击缩略图时加载模糊小图的问题。
本文讲解如何在 wordpress 图片画廊中，通过解析 `` 标签的 `srcset` 属性自动获取最高分辨率（hd）原图 url，并将其作为 lightbox 的显示源，避免点击缩略图时加载模糊小图的问题。
在响应式网页中，WordPress 等 CMS 通常为 <img alt="如何从 srcset 中提取高清原图 URL 并用于 Lightbox 显示" > 元素生成 srcset 属性，以提供多尺寸图片供浏览器按设备像素比和视口宽度智能选择。但 src 属性默认仅指向最小尺寸缩略图（如 image-four-300x151.jpg），直接用它初始化 Lightbox 会导致图像模糊——真正的高清原图（如 image-four.jpg）其实就藏在 srcset 中。
关键思路是：srcset 是以逗号分隔的“URL 宽度”对列表（如 url1.jpg 300w, url2.jpg 1024w, url3.jpg 1280w），其中宽度值最大的项通常对应原始高清图。我们可通过字符串解析提取最后一项的 URL（因 WordPress 一般按宽度升序排列，最大宽度项在末尾）：
// 在遍历每个 img 元素时执行
const srcset = img.getAttribute('srcset');
if (srcset) {
const candidates = srcset.split(', ').filter(s => s.trim());
const lastCandidate = candidates[candidates.length - 1]; // 取最后一项
const fullsizeUrl = lastCandidate.trim().split(' ')[0]; // 提取 URL 部分
img.dataset.fullsize = fullsizeUrl; // 缓存到 data 属性，便于后续读取
}随后，在 Lightbox 初始化及翻页逻辑中，统一使用 e.target.dataset.fullsize 替代 e.target.getAttribute('src')：
function handleCreateLightbox(e) {
const fullsizeUrl = e.target.dataset.fullsize;
const galleryId = e.target.dataset.galley;
const lightboxHTML = `
<div class="cookie_box">
<div class="cookie_box-content">
<i class="cookie_box-prev" data-source="${galleryId}">←</i>
<img src="${fullsizeUrl}" alt="" class="cookie_box-image" />
<i class="cookie_box-next" data-source="${galleryId}">→</i>
</div>
</div>`;
document.body.insertAdjacentHTML('beforeend', lightboxHTML);
}
function ChangeLinkImage(galleryId, index, lightImage) {
const newFullsize = imageGroup[galleryId][index].dataset.fullsize;
lightImage.src = newFullsize; // 确保翻页也加载高清图
}⚠️ 注意事项：
-
srcset排序依赖 CMS 行为：WordPress 默认按宽度升序输出，故取最后一项安全；若自定义主题改变顺序，建议按w值解析并取最大宽度对应 URL； -
容错处理：添加
if (srcset)判断，避免无srcset的图片报错； -
性能优化：
dataset.fullsize仅需在页面加载时预存一次，避免重复解析； -
兼容性：
dataset是现代标准，IE11+ 完全支持，无需 polyfill。
通过此方案，Lightbox 将始终展示原始高清图像，兼顾加载性能（缩略图仍用于首屏渲染）与视觉质量，是响应式图片集成 Lightbox 的推荐实践。
