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?
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;
}
}