Faster Webpage Loading with Pjax and Lazy Loading

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

当前为 2024-12-31 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Faster Webpage Loading with Pjax and Lazy Loading
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.7
  5. // @description Preload subsequent pages, lazy load images, videos, and multimedia, 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, videos, and other multimedia content
  15. document.addEventListener("DOMContentLoaded", function() {
  16. let lazyElements = [].slice.call(document.querySelectorAll("img.lazy, video.lazy, iframe.lazy"));
  17. if ("IntersectionObserver" in window) {
  18. let lazyElementObserver = new IntersectionObserver(function(entries, observer) {
  19. entries.forEach(function(entry) {
  20. if (entry.isIntersecting) {
  21. let lazyElement = entry.target;
  22. if (lazyElement.tagName === 'IMG') {
  23. lazyElement.src = lazyElement.dataset.src;
  24. } else if (lazyElement.tagName === 'VIDEO' || lazyElement.tagName === 'IFRAME') {
  25. lazyElement.src = lazyElement.dataset.src;
  26. if (lazyElement.tagName === 'VIDEO') {
  27. lazyElement.load();
  28. }
  29. }
  30. lazyElement.classList.remove("lazy");
  31. lazyElementObserver.unobserve(lazyElement);
  32. }
  33. });
  34. });
  35. lazyElements.forEach(function(lazyElement) {
  36. lazyElementObserver.observe(lazyElement);
  37. });
  38. } else {
  39. // Fallback for browsers without IntersectionObserver support
  40. let lazyLoad = function() {
  41. lazyElements.forEach(function(lazyElement) {
  42. if (lazyElement.getBoundingClientRect().top < window.innerHeight && lazyElement.getBoundingClientRect().bottom > 0 && getComputedStyle(lazyElement).display !== "none") {
  43. if (lazyElement.tagName === 'IMG') {
  44. lazyElement.src = lazyElement.dataset.src;
  45. } else if (lazyElement.tagName === 'VIDEO' || lazyElement.tagName === 'IFRAME') {
  46. lazyElement.src = lazyElement.dataset.src;
  47. if (lazyElement.tagName === 'VIDEO') {
  48. lazyElement.load();
  49. }
  50. }
  51. lazyElement.classList.remove("lazy");
  52. }
  53. });
  54. if (lazyElements.length === 0) {
  55. document.removeEventListener("scroll", lazyLoad);
  56. window.removeEventListener("resize", lazyLoad);
  57. window.removeEventListener("orientationchange", lazyLoad);
  58. }
  59. };
  60. document.addEventListener("scroll", lazyLoad);
  61. window.addEventListener("resize", lazyLoad);
  62. window.addEventListener("orientationchange", lazyLoad);
  63. }
  64. });
  65.  
  66. // Preload subsequent pages
  67. document.addEventListener("mouseover", function(event) {
  68. if (event.target.tagName === 'A' && event.target.href) {
  69. let link = event.target.href;
  70. if (link.includes('relevant-part')) { // Add condition to limit prefetching
  71. let prefetchLink = document.createElement('link');
  72. prefetchLink.rel = 'prefetch';
  73. prefetchLink.href = link;
  74. document.head.appendChild(prefetchLink);
  75. }
  76. }
  77. });
  78.  
  79. // Ensure Pjax script is loaded
  80. if (typeof Pjax === 'undefined') {
  81. var script = document.createElement('script');
  82. script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pjax/0.2.8/pjax.min.js';
  83. script.onload = initializePjax;
  84. document.head.appendChild(script);
  85. } else {
  86. initializePjax();
  87. }
  88.  
  89. function initializePjax() {
  90. // Initialize Pjax
  91. var pjax = new Pjax({
  92. elements: "a", // Default is "a[href], form[action]"
  93. selectors: ["title", ".content"], // Elements to update
  94. cacheBust: false // Disable cache busting
  95. });
  96.  
  97. // Optional: Add event listeners
  98. document.addEventListener("pjax:send", function() {
  99. console.log("Pjax request sent");
  100. });
  101. document.addEventListener("pjax:complete", function() {
  102. console.log("Pjax request completed");
  103. });
  104. // Prevent Pjax from causing issues like 503 errors or logging users out
  105. document.addEventListener("pjax:error", function(event) {
  106. console.error("Pjax error:", event);
  107. // Fallback to full page reload on error
  108. window.location.href = event.request.responseURL;
  109. });
  110. }
  111. })();