☰

Faster Webpage Loading with Pjax

Preload subsequent pages, lazy load images, and use Pjax for faster webpage loading

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

  1. // ==UserScript==
  2. // @name         Faster Webpage Loading with Pjax
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.5
  5. // @description  Preload subsequent pages, lazy load images, and use Pjax for faster webpage loading
  6. // @author       tae
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Lazy load images
  15.     document.addEventListener("DOMContentLoaded", function() {
  16.         let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  17.         if ("IntersectionObserver" in window) {
  18.             let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  19.                 entries.forEach(function(entry) {
  20.                     if (entry.isIntersecting) {
  21.                         let lazyImage = entry.target;
  22.                         lazyImage.src = lazyImage.dataset.src;
  23.                         lazyImage.classList.remove("lazy");
  24.                         lazyImageObserver.unobserve(lazyImage);
  25.                     }
  26.                 });
  27.             });
  28.             lazyImages.forEach(function(lazyImage) {
  29.                 lazyImageObserver.observe(lazyImage);
  30.             });
  31.         } else {
  32.             // Fallback for browsers without IntersectionObserver support
  33.             let lazyLoad = function() {
  34.                 lazyImages.forEach(function(lazyImage) {
  35.                     if (lazyImage.getBoundingClientRect().top < window.innerHeight && lazyImage.getBoundingClientRect().bottom > 0 && getComputedStyle(lazyImage).display !== "none") {
  36.                         lazyImage.src = lazyImage.dataset.src;
  37.                         lazyImage.classList.remove("lazy");
  38.                     }
  39.                 });
  40.                 if (lazyImages.length === 0) {
  41.                     document.removeEventListener("scroll", lazyLoad);
  42.                     window.removeEventListener("resize", lazyLoad);
  43.                     window.removeEventListener("orientationchange", lazyLoad);
  44.                 }
  45.             };
  46.             document.addEventListener("scroll", lazyLoad);
  47.             window.addEventListener("resize", lazyLoad);
  48.             window.addEventListener("orientationchange", lazyLoad);
  49.         }
  50.     });
  51.  
  52.     // Preload subsequent pages
  53.     document.addEventListener("mouseover", function(event) {
  54.         if (event.target.tagName === 'A' && event.target.href) {
  55.             let link = event.target.href;
  56.             if (link.includes('relevant-part')) { // Add condition to limit prefetching
  57.                 let prefetchLink = document.createElement('link');
  58.                 prefetchLink.rel = 'prefetch';
  59.                 prefetchLink.href = link;
  60.                 document.head.appendChild(prefetchLink);
  61.             }
  62.         }
  63.     });
  64.  
  65.     // Initialize Pjax
  66.     var pjax = new Pjax({
  67.         elements: "a", // Default is "a[href], form[action]"
  68.         selectors: ["title", ".content"], // Elements to update
  69.         cacheBust: false // Disable cache busting
  70.     });
  71.  
  72.     // Optional: Add event listeners
  73.     document.addEventListener("pjax:send", function() {
  74.         console.log("Pjax request sent");
  75.     });
  76.  
  77.     document.addEventListener("pjax:complete", function() {
  78.         console.log("Pjax request completed");
  79.     });
  80.  
  81.     // Prevent Pjax from causing issues like 503 errors or logging users out
  82.     document.addEventListener("pjax:error", function(event) {
  83.         console.error("Pjax error:", event);
  84.         // Fallback to full page reload on error
  85.         window.location.href = event.request.responseURL;
  86.     });
  87. })();