track processed images

2 files changed, 16 insertions, 10 deletions

diff --git a/boot.php b/boot.php
index 6eb0be8bb..6a8aa89a7 100644
--- a/boot.php
+++ b/boot.php
@@ -66,7 +66,7 @@ require_once('include/security.php');
 
 
 define('PLATFORM_NAME', 'hubzilla');
-define('STD_VERSION', '10.1.5');
+define('STD_VERSION', '10.1.6');
 define('ZOT_REVISION', '6.0');
 
 define('DB_UPDATE_VERSION', 1263);
diff --git a/view/js/main.js b/view/js/main.js
index e796b29c2..eff72197f 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -794,6 +794,7 @@ function imagesLoaded(elements, callback) {
 	let totalImages = 0;
 	let timeoutId;
 	let timeout = 10000;
+	let processed = [];
 
 	// Helper function to extract img elements from an HTML string
 	function extractImagesFromHtml(htmlString) {
@@ -802,12 +803,19 @@ function imagesLoaded(elements, callback) {
 		return tempDiv.querySelectorAll('.wall-item-body img, .wall-photo-item img');
 	}
 
-	function checkComplete() {
+	function checkComplete(src) {
+		// Track processed images to not count images multiple times if load event is emited from multiple sources
+		if (processed.includes(src)) {
+			return;
+		}
+
+		processed.push(src);
+		loadedCount++;
 		document.getElementById('image_counter').innerHTML = Math.round((loadedCount * 100) / totalImages) + '%';
 		if (loadedCount === totalImages) {
+			document.getElementById('image_counter').innerHTML = '';
 			clearTimeout(timeoutId);
 			callback();
-			document.getElementById('image_counter').innerHTML = '';
 		}
 	}
 
@@ -842,25 +850,23 @@ function imagesLoaded(elements, callback) {
 	totalImages = images.length;
 
 	images.forEach((img) => {
+		// Otherwise it will not load until visible
+		img.loading = 'eager';
 
-		img.loading = 'eager'; // Otherwise it will not load until visible
 		if (img.complete && img.naturalHeight !== 0) {
 			// Image is already loaded successfully
-			loadedCount++;
 			//console.log(`Image cached: ${img.src}`);
-			checkComplete();
+			checkComplete(img.src);
 		} else {
 			// Add event listeners for load and error events
 			img.addEventListener('load', () => {
 				//console.log(`Image loaded: ${img.src}`);
-				loadedCount++;
-				checkComplete();
+				checkComplete(img.src);
 			});
 
 			img.addEventListener('error', () => {
 				console.log(`Image failed to load: ${img.src}`);
-				loadedCount++;
-				checkComplete();
+				checkComplete(img.src);
 			});
 		}
 	});