Update Image Loader Placeholder Remover to 1.19.2

- Fix null TypeError
- Create (and use) a unified image link wrapper
- Fix potential hangs, especially on sites with a lot of images like forbes.com
This commit is contained in:
blankie 2023-09-09 09:35:43 +10:00
parent b2e2d21c09
commit 51fb9fac1f
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
2 changed files with 25 additions and 41 deletions

View File

@ -3,7 +3,7 @@
// @namespace blankie-scripts // @namespace blankie-scripts
// @match http*://*/* // @match http*://*/*
// @grant none // @grant none
// @version 1.19.1 // @version 1.19.2
// @author blankie // @author blankie
// @run-at document-end // @run-at document-end
// @description Removes image loading placeholders // @description Removes image loading placeholders
@ -25,6 +25,13 @@ function findUrl(element) {
} }
} }
// https://blog.google/
// https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
if (window.location.host === "blog.google" && element.hasAttribute("data-loading")) {
let data = JSON.parse(element.getAttribute("data-loading"));
return data.desktop || data.mobile;
}
// Examples of data-src: // Examples of data-src:
// - https://closeronline.co.uk // - https://closeronline.co.uk
// - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex // - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex
@ -129,7 +136,7 @@ function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
let followingTopMostParent = element.parentElement; let followingTopMostParent = element.parentElement;
let bottomMostChild = null; let bottomMostChild = null;
while (followingTopMostParent.localName !== "body") { while (followingTopMostParent && followingTopMostParent.localName !== "body") {
let clone = document.createElement(followingTopMostParent.localName); let clone = document.createElement(followingTopMostParent.localName);
clone.classList.add(...getLazyloaderClasses(followingTopMostParent)); clone.classList.add(...getLazyloaderClasses(followingTopMostParent));
for (let attr of getLazyloaderAttributes(followingTopMostParent)) { for (let attr of getLazyloaderAttributes(followingTopMostParent)) {
@ -218,13 +225,23 @@ function unhideElement(element, lazyLoaderClasses) {
toRemove.remove(); toRemove.remove();
} }
function wrapImage(img, url) {
if (img.closest("a")) {
return img;
}
let wrapper = document.createElement("a");
img.replaceWith(wrapper);
wrapper.href = url;
wrapper.append(img);
return wrapper;
}
function removePlaceholder(img) { function removePlaceholder(img) {
let hasLinkParent = false;
let parentElement = img.parentElement; let parentElement = img.parentElement;
while (parentElement) { while (parentElement) {
hasLinkParent = hasLinkParent || parentElement.localName === "a";
// Examples of hidden parents: // Examples of hidden parents:
// - https://www.wired.com/ // - https://www.wired.com/
// - https://www.wired.com/story/researcher-fooled-a-google-ai-into-thinking-a-rifle-was-a-helicopter/ // - https://www.wired.com/story/researcher-fooled-a-google-ai-into-thinking-a-rifle-was-a-helicopter/
@ -237,11 +254,6 @@ function removePlaceholder(img) {
} }
let picture = img.closest("picture"); let picture = img.closest("picture");
// Examples of blurred images with proper URLs:
// - https://blog.google/
// - https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
unhideElement(img, getLazyloaderClasses(img));
// Example of a would've been viewable image being blurred: // Example of a would've been viewable image being blurred:
// https://www.washingtonpost.com/nation/2023/07/21/ocean-color-changing-climate-change/ // https://www.washingtonpost.com/nation/2023/07/21/ocean-color-changing-climate-change/
if (window.location.host === "www.washingtonpost.com") { if (window.location.host === "www.washingtonpost.com") {
@ -274,6 +286,7 @@ function removePlaceholder(img) {
originalUrl = urlObject.href; originalUrl = urlObject.href;
} }
unhideElement(img, getLazyloaderClasses(img));
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?)
@ -285,12 +298,7 @@ function removePlaceholder(img) {
} }
} }
if (!hasLinkParent) { wrapImage(img, originalUrl);
let wrapper = document.createElement("a");
img.replaceWith(wrapper);
wrapper.href = originalUrl;
wrapper.appendChild(img);
}
} }
@ -355,30 +363,6 @@ if (window.location.host === "www.forbes.com") {
placeholder.style.paddingTop = 0; placeholder.style.paddingTop = 0;
} }
if (!progressiveImage.closest("a")) { progressiveImage.replaceWith(wrapImage(img, url));
let wrapper = document.createElement("a");
wrapper.href = url;
wrapper.append(img);
progressiveImage.replaceWith(wrapper);
} else {
progressiveImage.replaceWith(img);
}
}
}
// https://blog.google/
// https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
if (window.location.host === "blog.google") {
for (let img of document.querySelectorAll("img[data-loading]")) {
let data = JSON.parse(img.getAttribute("data-loading"));
let url = data.desktop || data.mobile;
img.src = url;
if (!img.closest("a")) {
let wrapper = document.createElement("a");
wrapper.href = url;
img.replaceWith(wrapper);
wrapper.append(img);
}
} }
} }

View File

@ -47,7 +47,7 @@ A userscript that adds small but useful features for Compass. Features include:
background background
- The context menu that only says "Copy" is now suppressed - The context menu that only says "Copy" is now suppressed
- The option to remember logins is unchecked by default - The option to remember logins is unchecked by default
- The dashboard tab in a user's profile no longer points you to #dsb - The dashboard tab in a user's profile no longer points you to #dsh
[Link Hints]: https://lydell.github.io/LinkHints/ [Link Hints]: https://lydell.github.io/LinkHints/