Improve zoom move performance 🚀 (#243)

willnguyen1312 · Nov 14, 2023 · f42d4bc · f42d4bc
1 parent 9c872ef
commit f42d4bc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 28 deletions.
diff --git a/.changeset/witty-bears-dress.md b/.changeset/witty-bears-dress.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": minor
+---
+
+Improve zoom move performance 🚀
diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts
@@ -33,19 +33,6 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   zoomedImg.style.top = "0"
   zoomedImg.style.left = "0"
 
-  function init() {
-    container.style.width = `${sourceImgElement.clientWidth}px`
-    container.style.height = `${sourceImgElement.clientHeight}px`
-    zoomedImg.style.display = "none"
-    zoomedImg.style.transform = "none"
-  }
-
-  if (sourceImgElement.complete) {
-    init()
-  } else {
-    sourceImgElement.onload = init
-  }
-
   function handlePointerEnter(event: PointerEvent) {
     zoomedImg.style.display = "block"
     const zoomedImgWidth = sourceImgElement.clientWidth * zoomFactor

diff --git a/size.json b/size.json
@@ -2,52 +2,52 @@
   "@zoom-image/core": {
     "createZoomImageWheel": "1.76 KB",
     "createZoomImageHover": "1.14 KB",
-    "createZoomImageMove": "869 B",
     "createZoomImageClick": "847 B",
+    "createZoomImageMove": "841 B",
     "cropImage": "369 B",
     "makeCalculateZoom": "97 B",
     "makeCalculatePercentage": "95 B"
   },
   "@zoom-image/react": {
     "useZoomImageWheel": "2.05 KB",
     "useZoomImageHover": "1.42 KB",
-    "useZoomImageMove": "1.12 KB",
+    "useZoomImageMove": "1.08 KB",
     "useZoomImageClick": "1.08 KB"
   },
   "@zoom-image/preact": {
     "useZoomImageWheel": "2.95 KB",
     "useZoomImageHover": "2.35 KB",
-    "useZoomImageMove": "2.06 KB",
+    "useZoomImageMove": "2.02 KB",
     "useZoomImageClick": "2.02 KB"
   },
   "@zoom-image/qwik": {
     "useZoomImageWheel": "2.2 KB",
     "useZoomImageHover": "1.55 KB",
-    "useZoomImageMove": "1.22 KB",
-    "useZoomImageClick": "1.2 KB"
+    "useZoomImageClick": "1.2 KB",
+    "useZoomImageMove": "1.19 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "3.25 KB",
     "useZoomImageHover": "2.62 KB",
-    "useZoomImageMove": "2.32 KB",
-    "useZoomImageClick": "2.29 KB"
+    "useZoomImageClick": "2.29 KB",
+    "useZoomImageMove": "2.29 KB"
   },
   "@zoom-image/svelte": {
     "useZoomImageWheel": "2.24 KB",
     "useZoomImageHover": "1.63 KB",
-    "useZoomImageMove": "1.31 KB",
-    "useZoomImageClick": "1.29 KB"
+    "useZoomImageClick": "1.29 KB",
+    "useZoomImageMove": "1.29 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "2.02 KB",
     "useZoomImageHover": "1.41 KB",
-    "useZoomImageMove": "1.08 KB",
-    "useZoomImageClick": "1.07 KB"
+    "useZoomImageClick": "1.07 KB",
+    "useZoomImageMove": "1.06 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "3.48 KB",
-    "ZoomImageHoverService": "3.48 KB",
-    "ZoomImageWheelService": "3.48 KB",
-    "ZoomImageMoveService": "3.48 KB"
+    "ZoomImageClickService": "3.43 KB",
+    "ZoomImageHoverService": "3.43 KB",
+    "ZoomImageMoveService": "3.43 KB",
+    "ZoomImageWheelService": "3.43 KB"
   }
 }