优化:表情图片懒加载 + 统一剩余 .GIF 引用为 .gif
- 贴图面板使用 data-src 懒加载,切换到贴图 Tab 时才加载图片 - 避免页面刷新时发起 50 个表情图片请求 - 统一 frame.blade.php 和 scripts.blade.php 中残余的 .GIF 大写引用
This commit is contained in:
@@ -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 }}"
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ── 分屏切换 ──────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user