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 からバニラ 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 に答える