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 

与本例相关的代码位于  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 文档，代码如下：


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);

}

运行效果如下图所示：




 



 
21326.html
 

 htmljavaJavaScript