首页 > 编程笔记 > JavaScript笔记 > JS BOM 阅读:25

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);
}
运行效果如下图所示:

 

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章