JS实现无刷新图片预览

本例设计一个简单的图片画廊，它使用 History API 作为接口，展示了一个图片预览模式：一个具有相关性的图片无刷新访问。在支持的浏览器中浏览，单击下一张图片画廊的链接将更新照片和更新 URL 地址，没有引发全页面刷新。在不支持的浏览器中，或者当用户禁用了脚本时，导航链接只是作为普通链接，会打开一个新的页面，整页刷新。

操作步骤

1) 创建网页文档。本例图片画廊包含系列 HTML 文档，这些文档结构相同，确保在关闭脚本的情况下能否顺畅访问。包含文件：adagio.html、angie.html、brandy.html、casey.html、fer.html、pepper.html、willie.html。这些文件都可以独立运行，在网站中属于平级关系。通过图片画廊的链接可以相互访问。

2) 设计文档结构。上述文件包含相同的 HTML 结构。核心结构如下：

<aside id="gallery">
    <p class="photonav"><a id="photonext" href="pepper.html">下一张</a><a id="photorev" href="brandy.html">&lt; 上一张</a></p>
    <figure id="photo"><img id="photoimg" src="gallery/1989-willie-500.jpg" alt="Willie" width="500" height="375">
        <figcaption>Willie,1989</figcaption>
    </figure>
</aside>

与本例相关的代码位于 <aside id="gallery"> 包含框中，它由一个 <p> 标签包含的导航链接、一个 <figure> 标签包含的图片，以及一个 <figcaption> 标签包含的图片说明文字组成。其他几个文件的结构相同，但是位于 <aside id="gallery"> 包含框中的信息不同。

3) 根据图片画廊的相关文档结构和内容，在 gallery 文件夹中映射一组异步请求的文档片段，对应文件名为：adagio.html、angie.html、brandy.html、casey.html、fer.html、pepper.html、willie.html。这些文件不能独立运行，仅作为 Ajax 异步请求的文档片段进行加载。

4) 设计文档片段的 HTML 代码结构。这些文档片段文件实际上是图片画廊系列文件中 <aside id="gallery"> 包含的 HTML 字符串提取。例如 gallery/adagio.html 文档，代码如下：

<p class="photonav"><a id="photonext" href="angie.html">下一张></a><a id="photoprev" href="pepper.html">&lt; 上一张</a></p>
<figure id="photo"><img id="photoimg" src="gallery/1995-adagio-500.jpg" alt="Adagio" width="500" height="375">
    <figcaption>Adagio,1995</figcaption>
</figure>

5) 完成整个图片画廊文档结构设计。下面重点介绍 JavaScript 脚本部分，新建 JavaScript 文件，保存为 gallery.js。

6) 为图片画廊的超链接绑定 click 事件处理程序。在处理函数中，先执行 Ajax 异步切换图片显示，如果成功，则调用 history.pushState() 方法，在浏览器历史记录中添加一条浏览记录，同时阻止超链接默认的跳转行为。

function addClicker (link) {
    link.addEventListener ("click", function (e) {
        if (swapPhoto (link.href)) {
            history.pushState (null, null, link.href);
            e.preventDefault ();
        }
    }, true);
}
function setupHistoryClicks () {
    addClicker (document.getElementById("photonext"));
    addClicker (document.getElementById("photoprev"));
}

7) 设计异步切换图片画廊显示。根据超链接的 href 属性值，使用 Ajax 打开 gallery 目录下对应的目标文件，如果打开成功，则把请求的文档片段写入 <aside id="gallery"> 容器中，同时调用上一步定义的 setupHistoryClicks() 函数，为新页面超链接绑定 click 事件处理程序。

function swapPhoto (href) {
    var req = new XMLHttpRequest ();
    req.open ("GET", "gallery/" + href.split("/").pop(), false);
    req.send (null);
    if (req.status == 200) {
        document.getElementById ("gallery").innerHTML = req.responseText;
        setupHistoryClicks ();
        return true;
    }
    return false;
}

8) 在页面初始化事件处理函数中，对页面加载的导航链接绑定 click 事件处理程序，同时注册 popstate 事件，监听浏览器历史记录的更新状态，如果发生变化，则调用 swapPhoto() 函数把图片画廊切换到对应的页面。

window.onload = function () {
    if (! supports_history_api()) { return; }
    setupHistoryClicks ();
    window.setTimeout (function () {
        window.addEventListener ("popstate", function (e) {
            swapPhoto (location.pathname);
        }, false);
    }, 1);
}

运行效果如下图所示：