☰

TMDB load unloaded images

Force TMDB to load unloaded images

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

  1. // ==UserScript==
  2. // @name        TMDB load unloaded images
  3. // @namespace   https://github.com/Tetrax-10
  4. // @description Force TMDB to load unloaded images
  5. // @icon        https://www.google.com/s2/favicons?sz=64&domain=themoviedb.org
  6. // @license     MIT
  7. // @version     1.0
  8. // @match       *://*.themoviedb.org/*
  9. // @run-at      document-idle
  10. // ==/UserScript==
  11.  
  12. ;(() => {
  13.     function changeSrc(img) {
  14.         if (
  15.             img.src.includes("media.themoviedb.org") &&
  16.             [".jpg", ".png"].some((e) => img.src.endsWith(e)) &&
  17.             !img.naturalHeight &&
  18.             img.hasAttribute("srcset")
  19.         ) {
  20.             // Get the resolution and id of the image
  21.             const resolution = img.src.match(/\/t\/p\/([^\/]+)\/[^\/]+$/)?.[1] ?? ""
  22.             const id = img.src.split("/").pop()
  23.  
  24.             img.src = `https://image.tmdb.org/t/p/${resolution}/${id}`
  25.             img.removeAttribute("srcset")
  26.         }
  27.     }
  28.  
  29.     // Function to handle intersection events
  30.     function handleIntersection(entries, observer) {
  31.         entries.forEach((entry) => {
  32.             if (entry.isIntersecting) {
  33.                 // Check if the element is visible in the viewport
  34.                 const imgElement = entry.target
  35.                 changeSrc(imgElement) // Change the image source if it's unloaded
  36.                 observer.unobserve(imgElement) // Stop observing the current image after it's logged
  37.             }
  38.         })
  39.     }
  40.  
  41.     // Create a new IntersectionObserver instance
  42.     const observer = new IntersectionObserver(handleIntersection, {
  43.         root: null, // Observe the viewport
  44.         rootMargin: "0px", // No margin around the viewport
  45.         threshold: 0.1, // Trigger when at least 10% of the image is visible
  46.     })
  47.  
  48.     // Select all img elements and observe them
  49.     document.querySelectorAll("img").forEach((img) => {
  50.         observer.observe(img)
  51.     })
  52. })()