removed (now-)buggy implementation of lazy loader

extension/core/bg/script-loader.js

@@ -70,9 +70,6 @@ singlefile.scriptLoader = (() => {
 			"/lib/single-file/css-medias-minifier.js",
 			"/lib/single-file/css-rules-matcher.js",
 			"/lib/single-file/css-rules-minifier.js"
-		],
-		lazyLoadImages: [
-			"/lib/single-file/lazy-loader.js"
 		]
 	};
 

lib/single-file/lazy-loader.js

@@ -1,108 +0,0 @@
-/*
- * Copyright 2018 Gildas Lormeau
- * contact : gildas.lormeau <at> gmail.com
- * 
- * This file is part of SingleFile.
- *
- *   SingleFile is free software: you can redistribute it and/or modify
- *   it under the terms of the GNU Lesser General Public License as published by
- *   the Free Software Foundation, either version 3 of the License, or
- *   (at your option) any later version.
- *
- *   SingleFile is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU Lesser General Public License for more details.
- *
- *   You should have received a copy of the GNU Lesser General Public License
- *   along with SingleFile.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-this.lazyLoader = this.lazyLoader || (() => {
-
-	const DATA_URI_PREFIX = "data:";
-	const EMPTY_DATA_URI = "data:base64,";
-
-	return {
-		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)) {
-					element.style.backgroundImage = "url(" + element.dataset.bg + ")";
-				}
-				if (dataBg) {
-					processElement(element);
-				}
-				element.removeAttribute("data-bg");
-			});
-			doc.querySelectorAll("img[data-srcset]").forEach(imgElement => {
-				const srcset = imgElement.dataset.srcset;
-				if (srcset && !imgElement.src && !imgElement.srcset) {
-					imgElement.srcset = srcset;
-				}
-				if (srcset) {
-					processElement(imgElement);
-					imgElement.removeAttribute("data-srcset");
-				}
-			});
-			doc.querySelectorAll("img[data-lazy-srcset]").forEach(imgElement => {
-				const srcset = imgElement.dataset.lazySrcset;
-				if (srcset && !imgElement.src && !imgElement.srcset) {
-					imgElement.srcset = srcset;
-				}
-				if (srcset) {
-					processElement(imgElement);
-					imgElement.removeAttribute("data-lazy-srcset");
-				}
-			});
-			doc.querySelectorAll(".lazyload").forEach(element => {
-				element.classList.add("lazypreload");
-				element.classList.remove("lazyload");
-			});
-		},
-		imageSelectors: {
-			src: {
-				"img[data-src]": "data-src",
-				"img[data-original]": "data-original",
-				"img[data-bg]": "data-bg",
-				"img[data-lazy-src]": "data-lazy-src",
-				"img[datasrc]": "datasrc"
-			},
-			srcset: {
-				"[data-srcset]": "data-srcset",
-				"[data-lazy-srcset]": "data-lazy-srcset"
-			}
-		}
-	};
-
-	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.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);
-		});
-	}
-
-	function processElement(element) {
-		element.removeAttribute("data-lazyload");
-		element.classList.remove("b-lazy");
-		element.classList.forEach(className => {
-			if (className.includes("loading")) {
-				element.classList.remove(className);
-			}
-		});
-		element.style.opacity = 1;
-		element.style.visibility = "visible";
-	}
-
-})();

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

@@ -82,7 +82,6 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			{ action: "replaceStyleContents" },
 			{ option: "selected", action: "removeUnselectedElements" },
 			{ option: "removeVideoSrc", action: "insertVideoPosters" },
-			{ option: "removeAlternativeImages", action: "removeAlternativeImages" },
 			{ option: "removeFrames", action: "removeFrames" },
 			{ option: "removeImports", action: "removeImports" },
 			{ option: "removeScripts", action: "removeScripts" },
@@ -115,7 +114,6 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		]
 	}, {
 		sequential: [
-			{ option: "lazyLoadImages", action: "lazyLoadImages" },
 			{ option: "removeAlternativeImages", action: "removeAlternativeImages" },
 			{ option: "removeAlternativeFonts", action: "removeAlternativeFonts" },
 			{ option: "compressCSS", action: "compressCSS" }
@@ -282,7 +280,6 @@ 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) {
@@ -375,10 +372,6 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			});
 		}
 
-		lazyLoadImages() {
-			DOM.lazyLoad(this.doc, GROUPED_IMG_ATTRIBUTE_NAME);
-		}
-
 		removeDiscardedResources() {
 			const objectElements = this.doc.querySelectorAll("applet, meta[http-equiv=refresh], object[data]:not([type=\"image/svg+xml\"]):not([type=\"image/svg-xml\"]):not([type=\"text/html\"]), embed[src]:not([src*=\".svg\"])");
 			this.stats.set("discarded", "objects", objectElements.length);
@@ -446,7 +439,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 					const imgData = this.options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
 					if (imgData.src) {
 						imgElement.setAttribute("src", imgData.src);
-		}
+					}
 				});
 			}
 		}
@@ -533,7 +526,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 
 		removeAlternativeImages() {
 			DOM.removeAlternativeImages(this.doc, this.options);
-						}
+		}
 
 		postRemoveAlternativeFonts() {
 			DOM.minifyFonts(this.doc, true);
@@ -658,11 +651,6 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			if (!this.options.removeVideoSrc) {
 				resourcePromises.push(DomProcessorHelper.processAttribute(this.doc, this.doc.querySelectorAll("video[src], video > source[src]"), "src", PREFIX_DATA_URI_VIDEO, this.baseURI, this.batchRequest, this.options));
 			}
-			if (this.options.lazyLoadImages) {
-				const imageSelectors = DOM.lazyLoaderImageSelectors();
-				Object.keys(imageSelectors.src).forEach(selector => resourcePromises.push(DomProcessorHelper.processAttribute(this.doc, this.doc.querySelectorAll(selector), imageSelectors.src[selector], PREFIX_DATA_URI_IMAGE, this.baseURI, this.batchRequest, this.options)));
-				Object.keys(imageSelectors.srcset).forEach(selector => resourcePromises.push(DomProcessorHelper.processSrcset(this.doc, this.doc.querySelectorAll(selector), imageSelectors.srcset[selector], PREFIX_DATA_URI_IMAGE, this.baseURI, this.batchRequest)));
-			}
 			await resourcePromises;
 			if (this.options.removeAlternativeImages) {
 				const shortcutIcons = Array.from(this.doc.querySelectorAll("link[href][rel=\"icon\"], link[href][rel=\"shortcut icon\"]"));
@@ -1315,23 +1303,20 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				const imgData = options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
 				if (imgData.replaceable) {
 					imgElement.setAttribute("src", `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${imgData.size.pxWidth}" height="${imgData.size.pxHeight}"><rect fill-opacity="0"/></svg>`);
-				if (options.lazyLoadImages) {
-					imgElement.setAttribute(GROUPED_IMG_ATTRIBUTE_NAME, "");
-				}
-				const backgroundStyle = {};
-				const backgroundSize = (imgData.objectFit == "content" || imgData.objectFit == "cover") && imgData.objectFit;
-				if (backgroundSize) {
-					backgroundStyle["background-size"] = imgData.objectFit;
-				}
-				if (imgData.objectPosition) {
-					backgroundStyle["background-position"] = imgData.objectPosition;
+					const backgroundStyle = {};
+					const backgroundSize = (imgData.objectFit == "content" || imgData.objectFit == "cover") && imgData.objectFit;
+					if (backgroundSize) {
+						backgroundStyle["background-size"] = imgData.objectFit;
+					}
+					if (imgData.objectPosition) {
+						backgroundStyle["background-position"] = imgData.objectPosition;
+					}
+					DomProcessorHelper.setBackgroundImage(imgElement, "var(" + variableName + ")", backgroundStyle);
+					imgElement.removeAttribute(dataAttributeName);
+					return true;
 				}
-				DomProcessorHelper.setBackgroundImage(imgElement, "var(" + variableName + ")", backgroundStyle);
-				imgElement.removeAttribute(dataAttributeName);
-				return true;
 			}
 		}
-		}
 
 	}
 

manifest.json

@@ -75,7 +75,6 @@
 			"lib/single-file/html-srcset-parser.js",
 			"lib/single-file/html-minifier.js",
 			"lib/single-file/html-serializer.js",
-			"lib/single-file/lazy-loader.js",
 			"lib/single-file/html-alt-images.js",
 			"lib/single-file/single-file-core.js",
 			"lib/single-file/single-file-browser.js"