improved lazy loading handling

lib/single-file/lazy-loader.js

@@ -25,6 +25,7 @@ this.lazyLoader = this.lazyLoader || (() => {
 
 	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");
@@ -32,6 +33,8 @@ this.lazyLoader = this.lazyLoader || (() => {
 				const dataBg = element.dataset.bg;
 				if (dataBg && dataBg.startsWith(DATA_URI_PREFIX) && dataBg != EMPTY_DATA_URI && !element.style.backgroundImage.includes(dataBg)) {
 					element.style.backgroundImage = "url(" + element.dataset.bg + ")";
+				}
+				if (dataBg) {
 					processElement(element);
 				}
 				element.removeAttribute("data-bg");
@@ -40,17 +43,21 @@ this.lazyLoader = this.lazyLoader || (() => {
 				const srcset = imgElement.dataset.srcset;
 				if (srcset && imgElement.srcset != srcset) {
 					imgElement.srcset = srcset;
+				}
+				if (srcset) {
 					processElement(imgElement);
+					imgElement.removeAttribute("data-srcset");
 				}
-				imgElement.removeAttribute("data-srcset");
 			});
 			doc.querySelectorAll("[data-lazy-srcset]").forEach(imgElement => {
 				const srcset = imgElement.dataset.lazySrcset;
 				if (srcset && imgElement.srcset != srcset) {
 					imgElement.srcset = srcset;
+				}
+				if (srcset) {
 					processElement(imgElement);
+					imgElement.removeAttribute("data-lazy-srcset");
 				}
-				imgElement.removeAttribute("data-lazy-srcset");
 			});
 			doc.querySelectorAll(".lazyload").forEach(element => {
 				element.classList.add("lazypreload");
@@ -62,7 +69,8 @@ this.lazyLoader = this.lazyLoader || (() => {
 				"img[data-src]": "data-src",
 				"img[data-original]": "data-original",
 				"img[data-bg]": "data-bg",
-				"img[data-lazy-src]": "data-lazy-src"
+				"img[data-lazy-src]": "data-lazy-src",
+				"img[datasrc]": "datasrc"
 			},
 			srcset: {
 				"[data-srcset]": "data-srcset",
@@ -71,14 +79,14 @@ this.lazyLoader = this.lazyLoader || (() => {
 		}
 	};
 
-	function replaceSrc(elements, attributeName, propertyName) {
+	function replaceSrc(elements, attributeName, propertyName, dataAttributeName) {
 		elements.forEach(element => {
-			const dataSrc = 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))) {
-				element.src = element.dataset[propertyName || attributeName];
+			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))) {
+				element.src = dataSrc;
+			}
+			if (dataSrc) {
 				processElement(element);
-				element.style.opacity = 1;
-				element.style.visibility = "visible";
 			}
 			element.removeAttribute("data-" + attributeName);
 		});
@@ -92,6 +100,8 @@ this.lazyLoader = this.lazyLoader || (() => {
 				element.classList.remove(className);
 			}
 		});
+		element.style.opacity = 1;
+		element.style.visibility = "visible";
 	}
 
 })();