1

我有一个静态 HTML 页面，它在加载时通​​过 jQuery 检查是否存在永久 cookie（“hideAnnouncements”）。如果此 cookie 不存在，则它使用 jQuery 的 load() 方法将外部 HTML 文件（包含公告的项目符号列表）加载到 div 中，然后在项目符号列表上执行垂直轮播滚动。当用户通过单击“x”图标选择隐藏此 div 时，它会为后续访问创建“hideAnnouncements”cookie。

我遇到的问题是页面 HTML 是首先加载的，然后当公告 div 加载到页面的最顶部时，页面跳转非常明显且令人讨厌。

不依赖服务器端代码（因为页面是缓存/静态 HTML），有没有更好的方法来避免页面跳转？还是我只是延迟加载整个页面，直到我知道 cookie 是否存在？

4

1 回答 1

0

我自己解决了这个问题，方法是将我的 JavaScript 从 jQuery 的 onload 中移出并作为 vanilla JS 进入 HTML 页面本身，然后使用 HTML5 fetch API 和 sessionStorage 来加载和存储 HTML。可能需要更多的清理。

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;
    }
}
于 2022-01-14T08:05:50.583 回答