// ==UserScript== // @name Image Loader Placeholder Remover // @namespace blankie-scripts // @match http*://*/* // @grant none // @version 1.17.1 // @author blankie // @run-at document-end // @description Removes image loading placeholders // ==/UserScript== "use strict"; 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); } function findUrl(element) { if (window.location.host === "www.vice.com") { let picture = element.parentElement; let source = picture && picture.localName === "picture" ? picture.querySelector("source") : null; if (source) { return source.srcset; } } // Examples of data-src: // - https://closeronline.co.uk // - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex // - https://daramiblog.com // - https://daramiblog.com/how-to-group-irregular-verbs-for-more-efficient-learning/ // - https://www.bleepingcomputer.com/ // - https://www.bleepingcomputer.com/news/microsoft/windows-11-snipping-tool-privacy-bug-exposes-cropped-image-content/ // - https://blog.joshumax.me/general/2021/08/11/running-doom-on-captioncall.html // - https://legendsoflocalization.com/common-problems-when-translating-games-into-japanese/ // - https://knowyourmeme.com/ // - https://knowyourmeme.com/memes/saddam-husseins-hiding-place if (isUrlLike(element.dataset.src)) { return element.dataset.src; } for (let attr of element.attributes) { // Examples of lazy: // - https://daramiblog.com/ // - https://daramiblog.com/how-to-group-irregular-verbs-for-more-efficient-learning/ // - https://www.theautopian.com/ // - https://www.theautopian.com/nobody-wants-touch-screen-glove-box-latches-and-it-needs-to-stop-now/ // - https://vulcan.io/blog/ // - https://vulcan.io/blog/ai-hallucinations-package-risk // Examples of src: // - https://vulcan.io/blog/ // - https://vulcan.io/blog/ai-hallucinations-package-risk // Examples of loading: // - https://closeronline.co.uk // - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex // Examples of original: // - https://www.pcgamer.com/ // - https://www.pcgamer.com/windows-95-theme-for-windows-10/ // Example of img-url: // - https://www.makeuseof.com/windows-11-resize-taskbar/ if (!/lazy|src|loading|original|img-url/.test(attr.name) || attr.name === "src") { continue; } if (!isUrlLike(attr.value)) { continue; } return attr.value; } return null; } function getLazyloaderClasses(element) { let classes = []; for (let className of element.classList) { // Examples of loading: // - https://closeronline.co.uk // - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex // Examples of lazy: // - https://www.vice.com/en/article/dy73n7/ehallpass-1000-thousand-schools-monitor-bathroom // - https://www.pcgamer.com/ // - https://www.pcgamer.com/windows-95-theme-for-windows-10/ // - https://www.theautopian.com/ // - https://www.theautopian.com/nobody-wants-touch-screen-glove-box-latches-and-it-needs-to-stop-now/ // - https://vulcan.io/blog/ // - https://vulcan.io/blog/ai-hallucinations-package-risk // Examples of responsive: // - https://www.vice.com/en/article/dy73n7/ehallpass-1000-thousand-schools-monitor-bathroom // - https://www.wired.com (it's a parent of lazyloaded s) // - https://www.wired.com/story/researcher-fooled-a-google-ai-into-thinking-a-rifle-was-a-helicopter/ (it's a parent of lazyloaded s) // Examples of preload: // - https://restofworld.org/ // - https://restofworld.org/2023/parent-facing-matchmaking-apps-china/ // Examples of placeholder: // - https://theconversation.com // - https://theconversation.com/yall-that-most-southern-of-southernisms-is-going-mainstream-and-its-about-time-193265 // Examples of image (though admittedly a hack for cloneLazyloaderTree): // - https://restofworld.org/ // - https://restofworld.org/2023/parent-facing-matchmaking-apps-china/ if (/loading|lazy|responsive|preload|placeholder|image/.test(className)) { classes.push(className); } } return classes; } function cloneLazyloaderTree(element, elementLazyLoaderClasses) { let topMostParent = null; let followingTopMostParent = element.parentElement; let bottomMostChild = null; while (followingTopMostParent.localName !== "body") { let clone = document.createElement(followingTopMostParent.localName); clone.classList.add(...getLazyloaderClasses(followingTopMostParent)); if (topMostParent) { clone.append(topMostParent); } topMostParent = clone; if (!bottomMostChild) { bottomMostChild = clone; } followingTopMostParent = followingTopMostParent.parentElement; } let clone = document.createElement(element.localName); clone.classList.add(...elementLazyLoaderClasses); if (bottomMostChild) { bottomMostChild.append(clone); bottomMostChild = clone; } else { topMostParent = bottomMostChild = clone; } return [topMostParent, bottomMostChild]; } function unhideElement(element, lazyLoaderClasses) { let style = getComputedStyle(element); // Examples of opacity: // - https://closeronline.co.uk // - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex // - https://www.vice.com/en/article/dy73n7/ehallpass-1000-thousand-schools-monitor-bathroom // - https://daramiblog.com/ // - https://daramiblog.com/how-to-group-irregular-verbs-for-more-efficient-learning/ // - https://www.wired.com/ // - https://www.wired.com/story/researcher-fooled-a-google-ai-into-thinking-a-rifle-was-a-helicopter/ if (style.opacity === "0") { element.style.opacity = 1; } // Examples of display: // - https://closeronline.co.uk // - https://closeronline.co.uk/real-life/news/ever-used-excuses-documented-spreadsheet-man-used-expose-wife-s-lack-sex if (style.display === "none") { element.style.display = "block"; } // Example: https://www.makeuseof.com/windows-11-resize-taskbar/ if (window.location.host === "www.makeuseof.com") { element.style.paddingBottom = 0; } // We check if the classes discriminate lazyloaded images, just in case // We can't remove the lazyload classes from the image, because: // - https://legendsoflocalization.com/japans-mysterious-love-of-the-word-lets/#why-lets-is-so-common // - https://www.wired.com/story/why-do-printers-still-suck/ // However, some sites use the classes to blur and/or change the opacity of images let [toRemove, toExamine] = cloneLazyloaderTree(element, lazyLoaderClasses); document.body.append(toRemove); let classStyle = getComputedStyle(toExamine); // Example of opacity === "0.75": // https://www.404media.co/welcome-to-404-media/ if (classStyle.opacity !== "1") { element.style.opacity = 1; } // Examples of blur: // - https://www.404media.co/welcome-to-404-media/ // - https://restofworld.org/ // - https://restofworld.org/2023/parent-facing-matchmaking-apps-china/ if (classStyle.filter.includes("blur(")) { element.style.filter = classStyle.filter.replaceAll(/blur\(.+?\)/g, "blur(0px)"); } toRemove.remove(); } function removePlaceholder(img) { let hasLinkParent = false; let parentElement = img.parentElement; while (parentElement) { hasLinkParent = hasLinkParent || parentElement.localName === "a"; // Examples of hidden parents: // - https://www.wired.com/ // - https://www.wired.com/story/researcher-fooled-a-google-ai-into-thinking-a-rifle-was-a-helicopter/ let lazyLoaderClasses = getLazyloaderClasses(parentElement); if (lazyLoaderClasses.length !== 0) { unhideElement(parentElement, lazyLoaderClasses); } parentElement = parentElement.parentElement; } let picture = img.closest("picture"); // Example of a would've been viewable image being blurred: // https://www.washingtonpost.com/nation/2023/07/21/ocean-color-changing-climate-change/ if (window.location.host === "www.washingtonpost.com") { img.parentElement.style.filter = img.parentElement.style.filter.replaceAll(/blur\(.+?\)/g, "blur(0)"); } let url = findUrl(img); if (!url) { return; } let originalUrl = 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; } img.src = url; unhideElement(img, getLazyloaderClasses(img)); // apparently, remaining s can fuck up image rendering (firefox still thinks that the contains an empty image?) // https://gizmodo.com/reddit-news-blackout-protest-is-finally-over-reddit-won-1850707509 // also, the above vice.com-specific condition had the below code if (picture) { for (let source of picture.querySelectorAll("source")) { source.remove(); } } if (!hasLinkParent) { let wrapper = document.createElement("a"); img.replaceWith(wrapper); wrapper.href = originalUrl; wrapper.appendChild(img); } } for (let img of document.querySelectorAll("img")) { removePlaceholder(img); } // the reason we check for mutations for 1s after the page loads is because of