Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Daretary on December 20, 2023, 08:31:03 AM

Title: Preloading Back and Next Pages
Post by: Daretary on December 20, 2023, 08:31:03 AM
Pages load instantly when you click on these links in pagination.


function preloadPages() {
    var e = document.querySelectorAll("a.nav_page span.main_icons.next_page"),
        t = document.querySelectorAll("a.nav_page span.main_icons.previous_page");

    function n(l) {
        l && fetch(l.parentElement.href)
            .then(e => e.text())
            .then(c => {
                l.parentElement.addEventListener("click", function(e) {
                    e.preventDefault();
                    var t = (new DOMParser).parseFromString(c, "text/html"),
                        n = document.querySelector("#primary"),
                        e = t.querySelector("#primary");

                    if (n && e) {
                        n.innerHTML = e.innerHTML;
                    }

                    var r = t.getElementsByTagName("script");
                    for (var a = 0; a < r.length; a++) {
                        var o = document.createElement("script");
                        o.type = "text/javascript";
                        if (r[a].src) {
                            o.src = r[a].src;
                        } else {
                            o.innerHTML = r[a].text;
                        }
                        document.head.appendChild(o);
                    }

                    preloadPages();
                    history.pushState({}, "", l.parentElement.href);
                    window.scrollTo(0, 0);
                });
            })
    }

    e.forEach(n);
    t.forEach(n);
}

window.onload = function() {
    preloadPages();

But I had to delete it because the "Next" page is marked as read, and this is unacceptable.  :D
You can experiment with this script. For example, for a separate group.  :)
Title: Re: Preloading Back and Next Pages
Post by: Arantor on December 22, 2023, 08:49:45 AM
This screws up read status, as you found, it also screws up all the stats counting, and possibly also your online status.

Also worth checking is whether this code is actually going to end up preloading previous/next *twice* because the a.nav_page selectors will appear twice on each page that has this.

Also also worth checking is whether this fires on pages it really shouldn't (e.g. the memberlist) because that's really heavy on a lot of sites and shouldn't really preload.

Also also also: SMF is actually coded to reject preloads if it figures out it's a preload for the first reason. But since this doesn't declare it's a preload, SMF doesn't know.
Title: Re: Preloading Back and Next Pages
Post by: Daretary on December 27, 2023, 08:54:37 AM
Quote from: Arantor on December 22, 2023, 08:49:45 AMThis screws up read status, as you found, it also screws up all the stats counting, and possibly also your online status.
This is the only danger. Everything else works great. This also shows Network in the browser.
Title: Re: Preloading Back and Next Pages
Post by: live627 on December 27, 2023, 10:04:37 PM
But if you still wanted to speed up page navigation on the client, you could apply click handlers to the page index links.