图片使用懒加载减少HTML卡顿

This commit is contained in:
shuaikangzhou 2024-01-02 21:05:19 +08:00
parent 240e296bd3
commit 6033a6a1b5
2 changed files with 7 additions and 9 deletions

View File

@ -21,7 +21,6 @@ def is_database_exist():
return os.path.exists(db_path) return os.path.exists(db_path)
@singleton
class MicroMsg: class MicroMsg:
def __init__(self): def __init__(self):
self.DB = None self.DB = None
@ -68,7 +67,7 @@ class MicroMsg:
try: try:
lock.acquire(True) lock.acquire(True)
sql = ''' sql = '''
SELECT UserName, Alias, Type, Remark, NickName, PYInitial, RemarkPYInitial, ContactHeadImgUrl.smallHeadImgUrl, ContactHeadImgUrl.bigHeadImgUrl SELECT UserName, Alias, Type, Remark, NickName, PYInitial, RemarkPYInitial, ContactHeadImgUrl.smallHeadImgUrl, ContactHeadImgUrl.bigHeadImgUrl,ExTraBuf
FROM Contact FROM Contact
INNER JOIN ContactHeadImgUrl ON Contact.UserName = ContactHeadImgUrl.usrName INNER JOIN ContactHeadImgUrl ON Contact.UserName = ContactHeadImgUrl.usrName
WHERE UserName = ? WHERE UserName = ?
@ -109,4 +108,3 @@ class MicroMsg:
if __name__ == '__main__': if __name__ == '__main__':
pass pass
# get_contact()

View File

@ -549,7 +549,7 @@ input {
} }
} }
const itemsPerPage = 1000; // 每页显示的元素个数 const itemsPerPage = 100; // 每页显示的元素个数
let currentPage = 1; // 当前页 let currentPage = 1; // 当前页
var reachedBottom = false; // 到达底部的标记 var reachedBottom = false; // 到达底部的标记
var lastScrollTop = 0; var lastScrollTop = 0;
@ -706,13 +706,13 @@ input {
function avatarBox(message) { function avatarBox(message) {
const avatarTag = document.createElement('div'); const avatarTag = document.createElement('div');
avatarTag.className = "avatar"; avatarTag.className = "avatar";
avatarTag.innerHTML = `<img src="${message.avatar_path}" />` avatarTag.innerHTML = `<img src="${message.avatar_path}" loading="lazy" />`
return avatarTag; return avatarTag;
} }
function messageImgBox(message) { function messageImgBox(message) {
const messageImgTag = document.createElement('div'); const messageImgTag = document.createElement('div');
messageImgTag.className = `chat-image`; messageImgTag.className = `chat-image`;
messageImgTag.innerHTML = `<img src="${message.text}" onclick="showModal(this)"/>`; messageImgTag.innerHTML = `<img src="${message.text}" onclick="showModal(this)" loading="lazy"/>`;
return messageImgTag; return messageImgTag;
} }
function messageVideoBox(message) { function messageVideoBox(message) {
@ -742,7 +742,7 @@ input {
function messageCard(message) { function messageCard(message) {
const messageTag = document.createElement('div'); const messageTag = document.createElement('div');
messageTag.className = `card`; messageTag.className = `card`;
messageTag.innerHTML = `<a href="${message.url}" target="_blank"><div class="card-content"><h2>${message.title}</h2><div class="description"><p>${message.description}</p><img class="thumbnail" src="${message.thumbnail}" alt="Thumbnail"></div></div><div class="link-info"><img class="app-logo" src="${message.app_logo}" alt="App Logo"><span class="app-name">${message.app_name}</span></div></a>`; messageTag.innerHTML = `<a href="${message.url}" target="_blank"><div class="card-content"><h2>${message.title}</h2><div class="description"><p>${message.description}</p><img loading="lazy" class="thumbnail" src="${message.thumbnail}" alt="Thumbnail"></div></div><div class="link-info"><img loading="lazy" class="app-logo" src="${message.app_logo}" alt="App Logo"><span class="app-name">${message.app_name}</span></div></a>`;
return messageTag; return messageTag;
} }
function messageFileBox(message) { function messageFileBox(message) {
@ -750,9 +750,9 @@ input {
messageFileTag.className = `chat-file`; messageFileTag.className = `chat-file`;
if (message.link !== ''){ if (message.link !== ''){
messageFileTag.innerHTML = ` messageFileTag.innerHTML = `
<a href="${message.link}" target="_blank"><span>${message.file_name}</span><img src="${message.text}"/></a>` <a href="${message.link}" target="_blank"><span>${message.file_name}</span><img loading="lazy" src="${message.text}"/></a>`
}else{ }else{
messageFileTag.innerHTML = `<div><span>文件已丢失</span><img src="${message.text}"/></div>`; messageFileTag.innerHTML = `<div><span>文件已丢失</span><img loading="lazy" src="${message.text}"/></div>`;
} }
return messageFileTag; return messageFileTag;
} }