Prevent initial page jump when showing an element based on cookie value

Question

I have a page of static HTML which, on load and via jQuery, checks if a permanent cookie ("hideAnnouncements") exists. If this cookie does NOT exist then it loads an external HTML file (containing a bullet list of announcements) into a div using jQuery's load() method, and then executes a vertical carousel scroller on the bullet list. When the user selects to hide this div by clicking on an "x" icon, then it creates the "hideAnnouncements" cookie for subsequent visits.

The problem I'm having is that the page HTML is loaded first, and then there is a very obvious and annoying page jump when the announcements div is loaded into the very top of the page.

Without relying on server-side code (since the page is cached/static HTML), is there a better way to approach this that will avoid the page jump? Or do I just delay loading the entire page until I know if the cookie exists or not?

Hey there, it would help you more if you could post your code or part of your code that you think is causing the problem here (i.e. html, js, and css if neede). — Yong, Jan 13 '22 at 23:17

score 0 · Answer 1 · answered Jan 14 '22 at 08:05

I solved this myself by moving my JavaScript out of jQuery's onload and into the HTML page itself as vanilla JS, and then using the HTML5 fetch API and sessionStorage to load and store the HTML. Probably needs a bit more cleaning up.

if (Cookies.get("hideAnnouncements") == undefined) {
    var announcementsHTML = sessionStorage.getItem("announcements");

    if (announcementsHTML == null) {
        fetch("announcements.html", {cache: "reload"})
            .then((response) => {
                return response.text()
            })
            .then((data) => {
                sessionStorage.setItem("announcements", data);
                document.getElementById("announcements").innerHTML = data;
            })
            .catch(function(error) {
                console.log(error);
            });
    }
    else {
        document.getElementById("announcements").innerHTML = announcementsHTML;
    }
}

Prevent initial page jump when showing an element based on cookie value

1 Answers1