私は5ページのウェブサイトを構築しています。コンテンツが非常に多いページ (100 以上の画像) もあれば、非常に軽量なページ (テキストの数段落) もあります。
ユーザーがナビゲーションをクリックしたときにjQuery の.ajax() メソッドを使用して新しいページをロードする jQuery ソリューション (プラグインがあるかもしれません) を探しています。正確には：
- クリックすると、ページのコンテンツがフェードアウトします
- 読み込まれると、目的のページのコンテンツがフェードインします
- クリーンな URLでブラウザ バーが更新されます
- 戻るボタンの機能は維持されます
- 最初のページのコンテンツはキャッシュされるため、ユーザーが戻ったときに最初のページの HTML、JS、画像がすぐに表示されます。つまり、新しい ajax 呼び出しは必要ありません。このビデオ(11:00 頃)で説明されているように、Promise 機能を使用すると、jQuery の .ajax() がキャッシュをサポートすることがわかります。
これが私がこれまでに持っているものです：
私が目指していることを多かれ少なかれ行うはずのスクリプトのコレクションであるAjaxifyを見つけました。ただし、それが堅牢なソリューションであり、キャッシュとクリーンな URL をサポートしているかどうかはわかりません。誰もそれを経験したことがありますか？
このマークアップを含むスタート ページ (index.php) と別のページ (info.php) があります。
<nav class="nav-1">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="info.php">Info</a></li>
</ul>
</nav>
<div class="page">
<p>This is the content area. Its content is to be replaced via Ajax.</p>
</div>
更新: プロジェクトの状態に関する詳細を追加しました