JavaScript实现简单图片库

数量众多的图片放一个网页里会导致网页加载速度变慢，在我们希望能够有一个图片库，只有用户点击图片链接时才加载相应的图片资源。

1.编写html文档
第一步工作是为图片创建一个链接清单，如果是无序的排列可以用<ul>,如果是有序的排列可以用<ol>

<ul>
<li><a href="images/1.jpg" title="1" >1</a></li>
<li><a href="images/2.jpg" title="1" >2</a></li>
<li><a href="images/3.jpg" title="1" >3</a></li>
<li><a href="images/4.jpg" title="1" >4</a></li>
</ul>

我们希望能够点击链接之后直接看到图片，而不是转到另一个窗口。
所以需要完成以下几点改进：

• 通过增加一个“占位符”，为这个页面预留一个浏览区
• 点击链接时将拦截这个网页的默认行为
• 点击链接时将把占位符图片替换成链接相对应的图片

于是我们先解决占位符图片的问题

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/7.jpg" id="placeholder" alt="my image gallery">

2.编写javascript函数
首先定义一个函数showpic(),将参数定义为witchpic，代表一个元素节点，获取“href”属性值，存入一个名为source的变量中

var source=whichpic.getAttribute("href");

然后定义一个变量placeholder，用于获取id名为"placeholder"的元素

    var placeholder=document.getElementById("placeholder");

最后用setAttribute（）方法对placeholder元素的src属性进行刷新

placeholder.setAttribute("src",source);
//等价于placeholder.src=source 改变占位符图片资源属性

3.JavaScript函数的调用
通过事件处理函数，例如点击（onclick）或鼠标悬停（onmouseover）等事件处理函数，基本语法为

event="javascript statement(s)"

这里我们将使用onclick事件处理showpic（this）方法（this表示这个对象）
，并且返回值为false，表示这个链接没有被点击，从而拦截这个网页的默认跳转行为。

 onclick="showpic(this);return false;"

然后嵌入到html文档中

<li><a href="images/1.jpg" title="1" onclick="showpic(this);return false;">1</a></li>

4.对JavaScript函数进行功能拓展
我们还可以在网页中实现文本切换的效果
首先定义一个变量text获取图片链接的“title”属性

    var text=whichpic.getAttribute("title");

在html中增加一段描述性的文本

<p id="describe">这是一段描述</p>

使用nodeValue属性刷新<p>元素中的内容，nodeValue可以用来改变文本节点的值，

    var describe=document.getElementById('describe');
    describe.childNodes[0].nodeValue=text;

注意：alert（describe.nodeValue的）显示为null
alert（describe.childNodes[0].nodeValue）显示的才是标签p中的内容

最后html代码为

<ul>
    <li><a href="images/1.jpg" title="1" onclick="showpic(this);return false;">1</a></li>
    <li><a href="images/2.jpg" title="2" onclick="showpic(this);return false;">2</a></li>
    <li><a href="images/3.jpg" title="3" onclick="showpic(this);return false;">3</a></li>
    <li><a href="images/4.jpg" title="4" onclick="showpic(this);return false;">4</a></li>
</ul>

js代码为

<script type="text/javascript">
    function showpic(whichpic){
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var describe=document.getElementById('describe');
    describe.childNodes[0].nodeValue=text;
}
</script>

可以修改css样式让界面更加美观

为了遵从良好的js和网页结构分离原则，我们对图片库进行进一步的改进：

1. 把文档中所有链接全放入一个数组里
2. 遍历数组
3. 给链接绑定点击事件，点击链接时能调用shoupic（）函数

    var link=document.getElementsByTagName('a');
    for (var i = 0; i < link.length; i++) {
        link[i].onclick=function  () {
            return showpic(this);
        }
    }