lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 贴图面板使用 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
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/right-panel.blade.php
+2 -2
View File
@@ -61,11 +61,11 @@
</div> </div>
</div> </div>
{{-- 贴图面板 --}} {{-- 贴图面板（懒加载：切换到该 Tab 时才加载图片） --}}
<div class="user-list-content" id="panel-emoji" style="display: none; padding: 6px;"> <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;"> <div style="display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;">
@for ($i = 1; $i <= 50; $i++) @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;" style="cursor: pointer; border: 1px solid transparent; border-radius: 2px;"
onmouseover="this.style.borderColor='#336699'" onmouseout="this.style.borderColor='transparent'" onmouseover="this.style.borderColor='#336699'" onmouseout="this.style.borderColor='transparent'"
onclick="insertEmoji('[IMG]{{ $i }}[/IMG]')" title="表情{{ $i }}" onclick="insertEmoji('[IMG]{{ $i }}[/IMG]')" title="表情{{ $i }}"
resources/views/chat/partials/scripts.blade.php
+7
View File
@@ -31,6 +31,13 @@
document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none'; document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
document.getElementById('tab-' + t).classList.toggle('active', t === tab); 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');
});
}
} }
// ── 分屏切换 ────────────────────────────────────── // ── 分屏切换 ──────────────────────────────────────