图片预览手机适配 + 正文图统一接入 lightbox
- lightbox:打开锁背景滚动(手机上背景不再跟着滑)、手机滑动左右翻页、 dvh 跟随全面屏可视高度、关闭钮/角标走 safe-area、图片全宽无圆角 - 全局 capture 委托:时间线/详情页 v-html 正文里的图统一可点开预览, capture+stop 压住整卡跳转;thumbifyHtml 把原图地址留在 data-fullsrc, 预览用原图而非 480w 缩略图;链接卡缩略图不劫持(点击仍是打开链接)
This commit is contained in:
1 parent
c2d5e9db89
commit
ce07f4a347
3 files changed
+87
-16
No files matched your search
@@ -70,7 +70,13 @@ export function applyImageRatio(html) {
|
||||
export function thumbifyHtml(html, w = 480) {
|
||||
if (!html) return html
|
||||
return html.replace(/<img\b[^>]*?>/gi, (tag) => {
|
||||
let out = tag.replace(/\bsrc="([^"]*)"/i, (m, src) => 'src="' + thumbURL(src, w) + '"')
|
||||
let out = tag
|
||||
// 原图地址留在 data-fullsrc:lightbox 打开时用原图,不用 480w 缩略图
|
||||
out = out.replace(/\bsrc="([^"]*)"/i, (m, src) => {
|
||||
const thumb = thumbURL(src, w)
|
||||
if (thumb !== src) out = out.replace(/^(<img)/i, '$1 data-fullsrc="' + src + '"')
|
||||
return 'src="' + thumb + '"'
|
||||
})
|
||||
if (!/\bloading=/i.test(out)) out = out.replace(/^<img/i, '<img loading="lazy"')
|
||||
return out
|
||||
})
|
||||
|
||||
Reference in new issue
Block a user