fix img lazy loading

Difegue/LANraragi#823

TODO.md

@@ -27,4 +27,3 @@ EPUB...
 
 ## Other front-end
 - e-hentai, with ehunter and EhSyringe support
-- mobile

comiclib/LANraragi/public/js/jxl.js

@@ -28,6 +28,9 @@
       decode(el, false, true);
     else if (el instanceof Element && getComputedStyle(el).backgroundImage.endsWith('.jxl")'))
       decode(el, true, false);
+    else
+      return;
+    el.dispatchEvent(new Event('load'));
   }
 
   function imgDataToDataURL(img, imgData, isCSS, isSource) {
@@ -57,7 +60,6 @@
   }
 
   async function decode(img, isCSS, isSource) {
-    img.dispatchEvent(new Event('load'));
     const jxlSrc = img.dataset.jxlSrc = isCSS ? getComputedStyle(img).backgroundImage.slice(5, -2) : isSource ? img.srcset : img.currentSrc;
     if (!isCSS && !isSource) {
       img.srcset = '';

comiclib/LANraragi/public/js/reader.js

@@ -239,9 +239,11 @@ Reader.initInfiniteScrollView = function () {
 
     Reader.pages.slice(1).forEach((source) => {
         const img = new Image();
-        img.src = source;
         img.id = `page-${Reader.pages.indexOf(source)}`;
         img.loading = "lazy";
+        img.height = 800;
+        img.width = 600;
+        img.src = source;
         $(img).addClass("reader-image");
         $("#display").append(img);
         observer.observe(img);

comiclib/main.py

@@ -174,7 +174,7 @@ def get_archive_metadata(id: str, db: Session = Depends(get_db)):
     a = db.get(Archive, id)
     if a is None:
         return JSONResponse({"operation": "metadata", "error": "This ID doesn't exist on the server.", "success": 0}, status.HTTP_400_BAD_REQUEST)
-    return {"arcid": a.id, "isnew": "false", "pagecount": a.pagecount, "progress": 0, "tags": ", ".join(map(lambda t: t.tag, a.tags)), "title": a.title}
+    return {"arcid": a.id, "isnew": "false", "pagecount": a.pagecount, "progress": 1, "tags": ", ".join(map(lambda t: t.tag, a.tags)), "title": a.title}
 
 
 @app.put("/api/archives/{id}/metadata")