jQuery：使用ajax，缓存，干净的URL和后退按钮支持加载页面

Question

我正在建立一个5页的网站。有些页面内容很重（100多张图片），有些页面非常轻（几段文字）。

我正在寻找一个jQuery解决方案（也许有一个插件？），它使用jQuery的.ajax() method在用户点击导航时加载新页面。确切地说：

• 点击后，页面内容淡出
• 加载后，所需网页的内容会淡入
• 浏览器栏以clean URL
更新
• 维持后退按钮功能
• 缓存第一页的内容，以便在用户导航回来时快速显示第一页的HTML，JS和图像。即没有新的ajax调用是必要的。我知道当你使用this video（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>

更新：添加了有关项目状态的更多详细信息

Answer 1

尝试使用turbolinks或pjax。

https://github.com/rails/turbolinks/

http://pjax.heroku.com

唯一缺失的部分是淡入/淡出回调，可以使用listen事件插入。