Fix: Stuttering when decode big images (From sync decode to async when possible)

Author: ollm

CHANGELOG.md

@@ -30,7 +30,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Gamepad menus do not work correctly [`b997d6b`](https://github.com/ollm/OpenComic/commit/b997d6bb6e05c597306169cb4fbbe035a4ab12d1)
 - Sharp crashes on Arch Linux and other distributions [`d60620a`](https://github.com/ollm/OpenComic/commit/d60620a2d3a446fef51cd86eff2dc80b22ccf6ba)
 - Add cMap support for PDF.js [`3da7b8e`](https://github.com/ollm/OpenComic/commit/3da7b8ec651964209d1df04248dad2bb8ab693bd)
-- Page jumps during zoom animation in vertical reading
+- Page jumps during zoom animation in vertical reading [`d9f94e7`](https://github.com/ollm/OpenComic/commit/d9f94e7eb5e757a28c6b92f0c3a791fc3be61282)
+- Stuttering when decode big images (From sync decode to async when possible)
 
 ## [v1.4.1](https://github.com/ollm/OpenComic/releases/tag/v1.4.1) (08-02-2025)
 

package-lock.json

@@ -110,7 +110,7 @@
 		"webdav": "^5.8.0"
 	},
 	"devDependencies": {
-		"electron": "^34.3.3",
+		"electron": "^34.5.1",
 		"electron-builder": "^26.0.12",
 		"env-cmd": "^10.1.0",
 		"node-abi": "^4.2.0",

package.json

@@ -44,6 +44,8 @@ async function setFile(_file, _scaleMagnifyingGlass = false, _renderType = 'canv
 	if(renderImages)
 		revokeAllObjectURL();
 
+	createObserver();
+
 	return;
 }
 
@@ -495,24 +497,23 @@ async function render(index, _scale = false, magnifyingGlass = false)
 					{
 						console.error(error);
 
-						img.src = app.encodeSrcURI(app.shortWindowsPath(src, true));
-						img.classList.remove('blobRendered', 'blobRender');
-						img.style.imageRendering = '';
+						await srcToImage(src, img)
 					}
 				}
 				else
 				{
-					img.src = app.encodeSrcURI(app.shortWindowsPath(src, true));
-					img.classList.remove('blobRendered', 'blobRender');
-					img.style.imageRendering = '';
+					await srcToImage(src, img)
 				}
 			}
 			else
 			{
-				img.src = app.encodeSrcURI(app.shortWindowsPath(src, true));
-				img.classList.remove('blobRendered', 'blobRender');
-				img.style.imageRendering = '';
+				await srcToImage(src, img)
 			}
+
+			if((onRender && onRender.num > 0) || _scale)
+				await decodeImage(img, true);
+			else
+				decodeImage(img, false);
 		}
 
 		if(onRender)
@@ -542,6 +543,93 @@ async function render(index, _scale = false, magnifyingGlass = false)
 	return;
 }
 
+async function srcToImage(src, img)
+{
+	img.src = app.encodeSrcURI(app.shortWindowsPath(src, true));
+	img.classList.remove('blobRendered', 'blobRender');
+	img.style.imageRendering = '';
+
+	return true;
+}
+
+async function decodeImage(img, sync = false)
+{
+	if(sync)
+	{
+		try
+		{
+			await img.decode();
+		}
+		catch(e){}	
+	}
+
+	observer.observe(img);
+}
+
+var observer = false;
+
+function createObserver()
+{
+	if(observer)
+		observer.disconnect();
+
+	observer = new IntersectionObserver(function(entries) {
+
+		for(let i = 0, len = entries.length; i < len; i++)
+		{
+			const entry = entries[i];
+
+			if(entry.isIntersecting || entry.intersectionRatio > 0)
+			{				
+				try
+				{
+					entry.target.decode();
+				}
+				catch(e){}	
+			}
+		}
+
+	}, {
+		root: template._contentRight().firstElementChild,
+		rootMargin: '4000px',
+		threshold: 0,
+	});
+}
+
+/*function removeDecodeImageInCanvas(img, ocImg)
+{
+	const canvas = ocImg.querySelector('canvas');
+	if(canvas) canvas.remove();
+
+	img.style.display = '';
+}
+
+async function decodeImageInCanvas(src, img, ocImg)
+{
+	console.log(src);
+
+	const response = await fetch(app.shortWindowsPath(src, true));
+	const buffer = await response.blob();
+	const bitmap = await createImageBitmap(buffer);
+
+	let canvas = ocImg.querySelector('canvas');
+
+	if(!canvas)
+	{
+		canvas = document.createElement('canvas');
+		canvas.className = 'originalSize imageInCanvas';
+		canvas.width = bitmap.width;
+		canvas.height = bitmap.height;
+		ocImg.prepend(canvas);
+		img.style.display = 'none';
+	}
+
+	const ctx = canvas.getContext('2d');
+	ctx.drawImage(bitmap, 0, 0);
+
+	return true;
+}*/
+
 module.exports = {
 	setFile: setFile,
 	reset: reset,

scripts/reading/render.js

@@ -25,7 +25,7 @@
 				{{else if ebook}}
 				<!-- <iframe> -->
 				{{else}}
-				<img data-src="{{htmlQuote image}}" data-path="{{htmlQuote path}}" data-index="{{index}}">
+				<img data-src="{{htmlQuote image}}" data-path="{{htmlQuote path}}" data-index="{{index}}" decoding="async">
 				{{/if}}
 			</oc-img>
 			{{/if}}