Greasy Fork

Greasy Fork is available in English.

TMDB load unloaded images

Force TMDB to load unloaded images

当前为 2024-09-13 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        TMDB load unloaded images
// @namespace   https://github.com/Tetrax-10
// @description Force TMDB to load unloaded images
// @icon        https://www.google.com/s2/favicons?sz=64&domain=themoviedb.org
// @license     MIT
// @version     1.0
// @match       *://*.themoviedb.org/*
// @run-at      document-idle
// ==/UserScript==

;(() => {
    function changeSrc(img) {
        if (
            img.src.includes("media.themoviedb.org") &&
            [".jpg", ".png"].some((e) => img.src.endsWith(e)) &&
            !img.naturalHeight &&
            img.hasAttribute("srcset")
        ) {
            // Get the resolution and id of the image
            const resolution = img.src.match(/\/t\/p\/([^\/]+)\/[^\/]+$/)?.[1] ?? ""
            const id = img.src.split("/").pop()

            img.src = `https://image.tmdb.org/t/p/${resolution}/${id}`
            img.removeAttribute("srcset")
        }
    }

    // Function to handle intersection events
    function handleIntersection(entries, observer) {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                // Check if the element is visible in the viewport
                const imgElement = entry.target
                changeSrc(imgElement) // Change the image source if it's unloaded
                observer.unobserve(imgElement) // Stop observing the current image after it's logged
            }
        })
    }

    // Create a new IntersectionObserver instance
    const observer = new IntersectionObserver(handleIntersection, {
        root: null, // Observe the viewport
        rootMargin: "0px", // No margin around the viewport
        threshold: 0.1, // Trigger when at least 10% of the image is visible
    })

    // Select all img elements and observe them
    document.querySelectorAll("img").forEach((img) => {
        observer.observe(img)
    })
})()