Faster Webpage Loading with Pjax

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

Verzia zo dňa 23.10.2024. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name         Faster Webpage Loading with Pjax
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  Preload subsequent pages, lazy load images, and use Pjax for faster webpage loading
// @author       Tae
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Lazy load images
    document.addEventListener("DOMContentLoaded", function() {
        let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
        if ("IntersectionObserver" in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy");
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });
            lazyImages.forEach(function(lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        } else {
            // Fallback for browsers without IntersectionObserver support
            let lazyLoad = function() {
                lazyImages.forEach(function(lazyImage) {
                    if (lazyImage.getBoundingClientRect().top < window.innerHeight && lazyImage.getBoundingClientRect().bottom > 0 && getComputedStyle(lazyImage).display !== "none") {
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy");
                    }
                });
                if (lazyImages.length === 0) {
                    document.removeEventListener("scroll", lazyLoad);
                    window.removeEventListener("resize", lazyLoad);
                    window.removeEventListener("orientationchange", lazyLoad);
                }
            };
            document.addEventListener("scroll", lazyLoad);
            window.addEventListener("resize", lazyLoad);
            window.addEventListener("orientationchange", lazyLoad);
        }
    });

    // Preload subsequent pages
    document.addEventListener("mouseover", function(event) {
        if (event.target.tagName === 'A' && event.target.href) {
            let link = event.target.href;
            if (link.includes('relevant-part')) { // Add condition to limit prefetching
                let prefetchLink = document.createElement('link');
                prefetchLink.rel = 'prefetch';
                prefetchLink.href = link;
                document.head.appendChild(prefetchLink);
            }
        }
    });

    // Ensure Pjax script is loaded
    if (typeof Pjax === 'undefined') {
        var script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pjax/0.2.8/pjax.min.js';
        script.onload = initializePjax;
        document.head.appendChild(script);
    } else {
        initializePjax();
    }

    function initializePjax() {
        // Initialize Pjax
        var pjax = new Pjax({
            elements: "a", // Default is "a[href], form[action]"
            selectors: ["title", ".content"], // Elements to update
            cacheBust: false // Disable cache busting
        });

        // Optional: Add event listeners
        document.addEventListener("pjax:send", function() {
            console.log("Pjax request sent");
        });
        document.addEventListener("pjax:complete", function() {
            console.log("Pjax request completed");
        });
        // Prevent Pjax from causing issues like 503 errors or logging users out
        document.addEventListener("pjax:error", function(event) {
            console.error("Pjax error:", event);
            // Fallback to full page reload on error
            window.location.href = event.request.responseURL;
        });
    }
})();