From 505e5fd682ed47050be1b6a049ec4651fc954727 Mon Sep 17 00:00:00 2001
From: blankie <blankie@nixnetmail.com>
Date: Sat, 9 Sep 2023 15:00:55 +1000
Subject: [PATCH] Update Image Loader Placeholder Remover to 1.20.0

- Add support for data-srcset
---
 Image Loader Placeholder Remover.user.js | 76 +++++++++++++++++-------
 1 file changed, 53 insertions(+), 23 deletions(-)

diff --git a/Image Loader Placeholder Remover.user.js b/Image Loader Placeholder Remover.user.js
index 1656521..d33bfe9 100644
--- a/Image Loader Placeholder Remover.user.js	
+++ b/Image Loader Placeholder Remover.user.js	
@@ -3,7 +3,7 @@
 // @namespace   blankie-scripts
 // @match       http*://*/*
 // @grant       none
-// @version     1.19.2
+// @version     1.20.0
 // @author      blankie
 // @run-at      document-end
 // @description Removes image loading placeholders
@@ -11,10 +11,16 @@
 
 "use strict";
 
+const URL_RE_STR = "(?:https?://|\\.{0,2}/)\\S+";
+const URL_RE = new RegExp(`^${URL_RE_STR}$`);
+
+const SRCSET_COMPONENT = `${URL_RE_STR}(?:\\s+\\d+w|\\s+\\d+(?:\\.\\d+)?x)?`;
+const SRCSET_RE = new RegExp(`^${SRCSET_COMPONENT}(?:,\\s*${SRCSET_COMPONENT})*$`);
+
 function isUrlLike(url) {
     // Example of ./path:
     // - https://projects.apnews.com/features/2023/missing-students-chronic-absenteeism/index.html
-    return url && /^(?:https?:\/\/|\.{0,2}\/)\S+$/.test(url);
+    return url && URL_RE.test(url);
 }
 function findUrl(element) {
     if (window.location.host === "www.vice.com") {
@@ -78,6 +84,19 @@ function findUrl(element) {
     return null;
 }
 
+function findSrcset(element) {
+    for (let attr of element.attributes) {
+        // Examples of data-srcset:
+        // - https://www.cbsnews.com/
+        // - https://www.cbsnews.com/news/leonard-mack-exonerated-47-years-after-wrongful-rape-conviction/
+        if (/srcset/.test(attr.name) && attr.name !== "srcset" && SRCSET_RE.test(attr.value)) {
+            return attr.value;
+        }
+    }
+
+    return null;
+}
+
 function getLazyloaderClasses(element) {
     let classes = [];
 
@@ -260,34 +279,43 @@ function removePlaceholder(img) {
         img.parentElement.style.filter = img.parentElement.style.filter.replaceAll(/blur\(.+?\)/g, "blur(0)");
     }
 
+    let srcset = findSrcset(img);
     let url = findUrl(img);
-    if (!url) {
+    if (!url && !srcset) {
         return;
     }
-    let originalUrl = url;
 
-    if (window.location.host === "www.vice.com") {
-        img.style.filter = "none";
-        picture.style.opacity = 1;
+    let originalUrl = !srcset ? url : null;
 
-        let urlObject = new URL(url, window.location);
-        urlObject.search = "";
-        originalUrl = urlObject.href;
-        urlObject.search = "?resize=1024:*";
-        url = urlObject.href;
-    } else if (window.location.host === "closeronline.co.uk") {
-        let urlObject = new URL(url, window.location);
-        urlObject.search = "";
-        originalUrl = urlObject.href;
-        img.closest(".image-container").querySelector(".image-loading").remove();
-    } else if (window.location.host === "theconversation.com") {
-        let urlObject = new URL(url, window.location);
-        urlObject.search = "";
-        originalUrl = urlObject.href;
+    if (url) {
+        if (window.location.host === "www.vice.com") {
+            img.style.filter = "none";
+            picture.style.opacity = 1;
+
+            let urlObject = new URL(url, window.location);
+            urlObject.search = "";
+            originalUrl = urlObject.href;
+            urlObject.search = "?resize=1024:*";
+            url = urlObject.href;
+        } else if (window.location.host === "closeronline.co.uk") {
+            let urlObject = new URL(url, window.location);
+            urlObject.search = "";
+            originalUrl = urlObject.href;
+            img.closest(".image-container").querySelector(".image-loading").remove();
+        } else if (window.location.host === "theconversation.com") {
+            let urlObject = new URL(url, window.location);
+            urlObject.search = "";
+            originalUrl = urlObject.href;
+        }
     }
 
     unhideElement(img, getLazyloaderClasses(img));
-    img.src = url;
+    if (srcset) {
+        img.srcset = srcset;
+    }
+    if (url) {
+        img.src = url;
+    }
 
     // apparently, remaining <source>s can fuck up image rendering (firefox still thinks that the <img> contains an empty image?)
     // https://gizmodo.com/reddit-news-blackout-protest-is-finally-over-reddit-won-1850707509
@@ -298,7 +326,9 @@ function removePlaceholder(img) {
         }
     }
 
-    wrapImage(img, originalUrl);
+    if (originalUrl) {
+        wrapImage(img, originalUrl);
+    }
 }