优化:表情图片懒加载 + 统一剩余 .GIF 引用为 .gif

- 贴图面板使用 data-src 懒加载,切换到贴图 Tab 时才加载图片
- 避免页面刷新时发起 50 个表情图片请求
- 统一 frame.blade.php 和 scripts.blade.php 中残余的 .GIF 大写引用
This commit is contained in:
2026-02-26 23:37:51 +08:00
parent 2735cbf1dd
commit a19ff20988
2 changed files with 9 additions and 2 deletions

View File

@@ -61,11 +61,11 @@
</div>
</div>
{{-- 贴图面板 --}}
{{-- 贴图面板(懒加载:切换到该 Tab 时才加载图片) --}}
<div class="user-list-content" id="panel-emoji" style="display: none; padding: 6px;">
<div style="display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;">
@for ($i = 1; $i <= 50; $i++)
<img src="/images/emoji/{{ $i }}.gif" width="24" height="24"
<img data-src="/images/emoji/{{ $i }}.gif" width="24" height="24"
style="cursor: pointer; border: 1px solid transparent; border-radius: 2px;"
onmouseover="this.style.borderColor='#336699'" onmouseout="this.style.borderColor='transparent'"
onclick="insertEmoji('[IMG]{{ $i }}[/IMG]')" title="表情{{ $i }}"

View File

@@ -31,6 +31,13 @@
document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
document.getElementById('tab-' + t).classList.toggle('active', t === tab);
});
// 贴图 Tab 懒加载:首次切换时将 data-src 赋值到 src
if (tab === 'emoji') {
document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
img.src = img.dataset.src;
img.removeAttribute('data-src');
});
}
}
// ── 分屏切换 ──────────────────────────────────────