Update Image Loader Placeholder Remover to 1.20.0
- Add support for data-srcset
This commit is contained in:
parent
51fb9fac1f
commit
505e5fd682
|
@ -3,7 +3,7 @@
|
||||||
// @namespace blankie-scripts
|
// @namespace blankie-scripts
|
||||||
// @match http*://*/*
|
// @match http*://*/*
|
||||||
// @grant none
|
// @grant none
|
||||||
// @version 1.19.2
|
// @version 1.20.0
|
||||||
// @author blankie
|
// @author blankie
|
||||||
// @run-at document-end
|
// @run-at document-end
|
||||||
// @description Removes image loading placeholders
|
// @description Removes image loading placeholders
|
||||||
|
@ -11,10 +11,16 @@
|
||||||
|
|
||||||
"use strict";
|
"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) {
|
function isUrlLike(url) {
|
||||||
// Example of ./path:
|
// Example of ./path:
|
||||||
// - https://projects.apnews.com/features/2023/missing-students-chronic-absenteeism/index.html
|
// - 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) {
|
function findUrl(element) {
|
||||||
if (window.location.host === "www.vice.com") {
|
if (window.location.host === "www.vice.com") {
|
||||||
|
@ -78,6 +84,19 @@ function findUrl(element) {
|
||||||
return null;
|
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) {
|
function getLazyloaderClasses(element) {
|
||||||
let classes = [];
|
let classes = [];
|
||||||
|
|
||||||
|
@ -260,12 +279,15 @@ function removePlaceholder(img) {
|
||||||
img.parentElement.style.filter = img.parentElement.style.filter.replaceAll(/blur\(.+?\)/g, "blur(0)");
|
img.parentElement.style.filter = img.parentElement.style.filter.replaceAll(/blur\(.+?\)/g, "blur(0)");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let srcset = findSrcset(img);
|
||||||
let url = findUrl(img);
|
let url = findUrl(img);
|
||||||
if (!url) {
|
if (!url && !srcset) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let originalUrl = url;
|
|
||||||
|
|
||||||
|
let originalUrl = !srcset ? url : null;
|
||||||
|
|
||||||
|
if (url) {
|
||||||
if (window.location.host === "www.vice.com") {
|
if (window.location.host === "www.vice.com") {
|
||||||
img.style.filter = "none";
|
img.style.filter = "none";
|
||||||
picture.style.opacity = 1;
|
picture.style.opacity = 1;
|
||||||
|
@ -285,9 +307,15 @@ function removePlaceholder(img) {
|
||||||
urlObject.search = "";
|
urlObject.search = "";
|
||||||
originalUrl = urlObject.href;
|
originalUrl = urlObject.href;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
unhideElement(img, getLazyloaderClasses(img));
|
unhideElement(img, getLazyloaderClasses(img));
|
||||||
|
if (srcset) {
|
||||||
|
img.srcset = srcset;
|
||||||
|
}
|
||||||
|
if (url) {
|
||||||
img.src = url;
|
img.src = url;
|
||||||
|
}
|
||||||
|
|
||||||
// apparently, remaining <source>s can fuck up image rendering (firefox still thinks that the <img> contains an empty image?)
|
// 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
|
// https://gizmodo.com/reddit-news-blackout-protest-is-finally-over-reddit-won-1850707509
|
||||||
|
@ -298,8 +326,10 @@ function removePlaceholder(img) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (originalUrl) {
|
||||||
wrapImage(img, originalUrl);
|
wrapImage(img, originalUrl);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue