From 47a363be0f9443576d05a6f5fc3cbad429f60889 Mon Sep 17 00:00:00 2001
From: Jin <22962980+JYC333@users.noreply.github.com>
Date: Fri, 28 Mar 2025 22:28:09 +0100
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20improve=20image=20zo?=
 =?UTF-8?q?om?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/public/app/services/content_renderer.ts  | 7 +++++--
 src/public/app/widgets/type_widgets/image.ts | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/public/app/services/content_renderer.ts b/src/public/app/services/content_renderer.ts
index 7afdc76d0..0bf7bca28 100644
--- a/src/public/app/services/content_renderer.ts
+++ b/src/public/app/services/content_renderer.ts
@@ -150,7 +150,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     $renderedContent.append($img);
 
     if (options.imageHasZoom) {
-        setTimeout(() => {
+        const initZoom = async () => {
             const element = document.querySelector(`#${$img.attr("id")}`);
             if (element) {
                 WheelZoom.create(`#${$img.attr("id")}`, {
@@ -158,8 +158,11 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
                     speed: 1.3,
                     zoomOnClick: false
                 });
+            } else {
+                requestAnimationFrame(initZoom);
             }
-        }, 0);
+        };
+        initZoom();
     }
 
     imageContextMenuService.setupContextMenu($img);
diff --git a/src/public/app/widgets/type_widgets/image.ts b/src/public/app/widgets/type_widgets/image.ts
index a14af8af8..e082fd003 100644
--- a/src/public/app/widgets/type_widgets/image.ts
+++ b/src/public/app/widgets/type_widgets/image.ts
@@ -54,7 +54,7 @@ class ImageTypeWidget extends TypeWidget {
         this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
         this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
 
-        setTimeout(() => {
+        const initZoom = async () => {
             const element = document.querySelector(`#${this.$imageView.attr("id")}`);
             if (element) {
                 WheelZoom.create(`#${this.$imageView.attr("id")}`, {
@@ -62,8 +62,11 @@ class ImageTypeWidget extends TypeWidget {
                     speed: 1.3,
                     zoomOnClick: false
                 });
+            } else {
+                requestAnimationFrame(initZoom);
             }
-        }, 0);
+        };
+        initZoom();
 
         imageContextMenuService.setupContextMenu(this.$imageView);