Tengo una página de HTML estático que, al cargar y mediante jQuery, comprueba si existe una cookie permanente ("ocultar anuncios"). Si esta cookie NO existe, entonces carga un archivo HTML externo (que contiene una lista de viñetas de anuncios) en un div usando el método load() de jQuery, y luego ejecuta un desplazamiento de carrusel vertical en la lista de viñetas. Cuando el usuario selecciona ocultar este div haciendo clic en un icono "x", crea la cookie "hideAnnouncements" para visitas posteriores.
El problema que tengo es que la página HTML se carga primero, y luego hay un salto de página muy obvio y molesto cuando el div de anuncios se carga en la parte superior de la página.
Sin depender del código del lado del servidor (ya que la página está almacenada en caché/HTML estático), ¿hay una mejor manera de abordar esto que evitará el salto de página? ¿O simplemente demoro en cargar toda la página hasta que sepa si la cookie existe o no?
Resolví esto yo mismo sacando mi JavaScript de la carga de jQuery y llevándolo a la propia página HTML como Vanilla JS, y luego usando la API de obtención de HTML5 y sessionStorage para cargar y almacenar el HTML. Probablemente necesite un poco más de limpieza.
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; } }