Faster Webpage Loading with Pjax

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

Stan na 07-09-2024. Zobacz najnowsza wersja.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

// ==UserScript==
// @name         Faster Webpage Loading with Pjax
// @namespace    http://tampermonkey.net/
// @version      1.4
// @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);
            }
        }
    });

    // 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;
    });
})();