made the loader of lazy-loaded images aware of image grouping

lib/single-file/lazy-loader.js

@@ -24,11 +24,11 @@ this.lazyLoader = this.lazyLoader || (() => {
 	const EMPTY_DATA_URI = "data:base64,";
 
 	return {
-		process(doc) {
-			replaceSrc(doc.querySelectorAll("img[datasrc]"), "src", null, "datasrc");
-			replaceSrc(doc.querySelectorAll("img[data-src]"), "src");
-			replaceSrc(doc.querySelectorAll("img[data-lazy-src]"), "lazy-src", "lazySrc");
-			replaceSrc(doc.querySelectorAll("img[data-original]"), "original");
+		process(doc, groupedImgAttributeName) {
+			replaceSrc(doc.querySelectorAll("img[datasrc]"), "src", null, "datasrc", groupedImgAttributeName);
+			replaceSrc(doc.querySelectorAll("img[data-src]"), "src", groupedImgAttributeName);
+			replaceSrc(doc.querySelectorAll("img[data-lazy-src]"), "lazy-src", "lazySrc", groupedImgAttributeName);
+			replaceSrc(doc.querySelectorAll("img[data-original]"), "original", groupedImgAttributeName);
 			doc.querySelectorAll("[data-bg]").forEach(element => {
 				const dataBg = element.dataset.bg;
 				if (dataBg && dataBg.startsWith(DATA_URI_PREFIX) && dataBg != EMPTY_DATA_URI && !element.style.backgroundImage.includes(dataBg)) {
@@ -79,16 +79,17 @@ this.lazyLoader = this.lazyLoader || (() => {
 		}
 	};
 
-	function replaceSrc(elements, attributeName, propertyName, dataAttributeName) {
+	function replaceSrc(elements, attributeName, propertyName, dataAttributeName, groupedImgAttributeName) {
 		elements.forEach(element => {
 			const dataSrc = dataAttributeName ? element.getAttribute(dataAttributeName) : element.dataset[propertyName || attributeName];
-			if (dataSrc && dataSrc.startsWith(DATA_URI_PREFIX) && dataSrc != EMPTY_DATA_URI && (!element.src || (element.src != dataSrc && dataSrc.length >= element.src.length))) {
+			if (dataSrc && dataSrc.startsWith(DATA_URI_PREFIX) && dataSrc != EMPTY_DATA_URI && element.getAttribute(groupedImgAttributeName) != "" && (!element.src || (element.src != dataSrc && dataSrc.length >= element.src.length))) {
 				element.src = dataSrc;
 			}
 			if (dataSrc) {
 				processElement(element);
 			}
 			element.removeAttribute(dataAttributeName ? dataAttributeName : "data-" + attributeName);
+			element.removeAttribute(groupedImgAttributeName);
 		});
 	}
 

lib/single-file/single-file-browser.js

@@ -213,8 +213,8 @@ this.SingleFile = this.SingleFile || (() => {
 			return htmlmini.postProcess(doc);
 		}
 
-		static lazyLoad(doc) {
-			return lazyLoader.process(doc);
+		static lazyLoad(doc, groupedImgAttributeName) {
+			return lazyLoader.process(doc, groupedImgAttributeName);
 		}
 
 		static minifyCSS(doc, mediaAllInfo) {

lib/single-file/single-file-core.js

@@ -276,6 +276,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 	// ------------
 	const EMPTY_DATA_URI = "data:base64,";
 	const EMPTY_IMAGE = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+	const GROUPED_IMG_ATTRIBUTE_NAME = "data-sf-img";
 
 	class DOMProcessor {
 		constructor(options, batchRequest) {
@@ -368,7 +369,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		}
 
 		lazyLoadImages() {
-			DOM.lazyLoad(this.doc);
+			DOM.lazyLoad(this.doc, GROUPED_IMG_ATTRIBUTE_NAME);
 		}
 
 		removeDiscardedResources() {
@@ -1338,6 +1339,9 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			if (imgElement.getAttribute(dataAttributeName) != null) {
 				const imgData = options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
 				imgElement.setAttribute("src", `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${imgData.pxWidth}" height="${imgData.pxHeight}"><rect fill-opacity="0"/></svg>`);
+				if (this.options.lazyLoadImages) {
+					imgElement.setAttribute(GROUPED_IMG_ATTRIBUTE_NAME, "");
+				}
 				DomProcessorHelper.setBackgroundImage(imgElement, "var(" + variableName + ")");
 				imgElement.removeAttribute(dataAttributeName);
 				return true;