kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-05-06 18:29:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

使用懒加载优化系统消耗

Browse Source
This commit is contained in:
Kakune55 2024-04-11 20:10:02 +08:00
parent 7a5dde7169
commit b950ae8b76
4 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
file.py
View File

@ -59,6 +59,7 @@ def raedZip(bookid: str, index: int):
# 读取图片数据
image_data = zip_ref.read(image_filename)
zip_ref.close()
return image_data, image_filename
except zipfile.BadZipFile: # 异常处理
@ -74,6 +75,7 @@ def thumbnail(input,size=(400,800)):
im.thumbnail(size)
output_io = io.BytesIO()
im.save(output_io,format='WEBP')
im.close()
output_io.seek(0)
return output_io
@ -83,6 +85,7 @@ def imageToWebP(input):
im = im.convert('RGB')
output_io = io.BytesIO()
im.save(output_io,format='WEBP')
im.close()
output_io.seek(0)
return output_io

12
main.py
View File

@ -1,4 +1,4 @@
import configparser, os
import configparser, gc
import db, file
from flask import *
@ -68,16 +68,17 @@ def img(bookid, index): # 图片接口
return abort(404)
# 设置响应类型为图片
data, filename = file.raedZip(bookid,index)
if isinstance(data, str):
abort(404)
if request.args.get("mini") == "yes":
data = file.thumbnail(data)
else:
data = file.imageToWebP(data)
if isinstance(data, str):
abort(404)
response = make_response(data) #读取文件
del data
response.headers.set('Content-Type', 'image/Webp')
response.headers.set('Content-Disposition', 'inline', filename=filename)
gc.collect()
return response
@ -85,7 +86,10 @@ def img(bookid, index): # 图片接口
def book(bookid): # 接口
if request.cookies.get("islogin") is None:
return abort(403)
return render_template("view.html",data = bookid)
data = db.searchByid(bookid)
if data == "":
return abort(404)
return render_template("view.html",id = bookid , index = range(1,data[0][3]))
@app.route("/view/<bookid>")

BIN
static/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

72
templates/view.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -23,56 +24,49 @@
height: auto;
margin-bottom: 20px;
}
img {
display: block;
width: 100%;
min-height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="comic-container"></div>
{% for i in index %}
<img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
{% endfor %}
<div style="display:flex;justify-content: center; align-items:center;">
<img src="/static/loading.gif" id="loadingGIF">
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const comicId = getComicIdFromURL();
if (comicId) {
displayComic(comicId);
} else {
console.error('No comic ID found in URL');
}
});
var imgs = document.querySelectorAll('.imgs');
// 从当前URL中获取漫画ID
function getComicIdFromURL() {
const urlParts = window.location.pathname.split('/');
return urlParts[2]; // 第三部分是漫画ID
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
var T = e.offsetTop;
while (e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
// 显示漫画
function displayComic(comicId) {
let currentImageIndex = 1;
const comicContainer = document.getElementById('comic-container');
function loadNextImage() {
const imageUrl = `/api/img/${comicId}/${currentImageIndex}`;
fetch(imageUrl)
.then(response => {
if (response.ok) {
const img = document.createElement('img');
img.src = imageUrl;
img.classList.add('comic-image');
comicContainer.appendChild(img);
currentImageIndex++;
// 添加延迟，以控制加载速度
setTimeout(loadNextImage, 500);
} else {
console.error('Error loading image:', response.statusText);
function lazyLoad(imgs) {
var H = document.documentElement.clientHeight;//获取可视区域高度
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
})
.catch(error => {
console.error('Error loading image:', error);
});
}
// 加载第一张图片
loadNextImage();
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
lazyLoad(imgs);
}
</script>
</body>
</html>