JavaScript图片库

时间  2019-11-15
标签 javascript 图片 栏目 JavaScript 繁體版
原文   原文链接

将图片放到网上的方法有不少,你能够简单地把全部的图片都放到网页上。可是，若是你打算发布的图片过多,这个页面很快会变的过于庞大,并且加上这些图片后用户要下载的的数据量就会变得至关可观。咱们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;因此利用JavaScript来建立一个图片库将是最佳的选择；javascript

说下步骤:html

第一步：把整个图片库的连接都加载到图片库的主页里；java

第二步：当用户点击对应的超连接时,拦截网页的默认行为,即(超连接点击跳转行为);node

第三步：当用户点击对应的超连接后,把"占位符"图片替换成那个超连接所对应的图片;数组

1、代码以下:浏览器

初版:app

<body>
<a href="img/index.jpg">图片一</a><br />
    <a href="img/index.jpg" onclick="showPic(this);return false;">图片一</a><br />
    <a href="img/index1.jpg" onclick="showPic(this);return false;">图片二</a><br />
    <a href="img/index2.jpg" onclick="showPic(this);return false;">图片三</a><br />
    <a href="img/index4.jpg" onclick="showPic(this);return false;">图片四</a>
    <p>----------------------------</p>
    <img src="img/blank.png" alt="blank"/>
    <script type="text/javascript">function showPic(whichpic) {
            var source = whichpic.getAttribute('href'); //获取目标元素的src属性;
            var placeholder = document.getElementsByTagName('img'); //获取占位符图片对象;
            placeholder.setAttribute('src', source); //图片替换
        }
    </script>
</body>
代码解析：onclick="showPic(this);return false;" 这段代码表示给<a></a>标签添加了一个onclick事件处理函数,添加处理函数的语法以下所示:
event="JavaScript statement"  JavaScript statement->方法体,this表明当前<a></a>标签对象。
注意return false;表示阻止超连接跳转的默认行为；
让咱们了解一下DOM1中的事件处理函数的工做机制。在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会被执行。被调用的JavaScript就会返回一个值,这个值将被传递给那个事件处理函数。
若返回的值是true,onclick事件处理函数就认为这个函数被点击了,若为false，就相反；因此加上return false，就能够防止用户被带到目标连接窗口;
注意：return false；只在DOM1中适用;因此这段代码只会在支持DOM1标准的浏览器中才会有效,其余的浏览器任然会被带到目标窗口！关于这个bug暂时先放一放！

2、因为return false；在一些浏览器上可能看不出效果,因此我这边换了一种方式实现JS图片库；代码以下:
第二版：
<body>
    <a href="javascript:void(0);" title="img/index.jpg">图片一</a><br />
    <a href="javascript:void(0);" title="img/index1.jpg">图片二</a><br />
    <a href="javascript:void(0);" title="img/index2.jpg">图片三</a><br />
    <a href="javascript:void(0);" title="img/index4.jpg">图片四</a>
    <p>----------------------------</p>
    <img src="img/blank.png" alt="blank"/>
    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                showPic(this);
            }
        }
            function showPic(whichpic) {
            var source = whichpic.getAttribute('title'); //获取目标元素的title属性;
            var placeholder = document.getElementsByTagName('img')[0]; //获取占位符图片对象;
            placeholder.setAttribute('src', source); //图片替换
        }
    </script>
</body>

3、在学完nodeValue属性http://www.cnblogs.com/GreenLeaves/p/5695165.html#nodeValue后给JS图片库增长一个新的功能:点击超连接把图片的描述显示到图片的下面代码以下：
第三版：
<body>
    <a href="javascript:void(0);" title="img/index.jpg">图片一</a><br />
    <a href="javascript:void(0);" title="img/index1.jpg">图片二</a><br />
    <a href="javascript:void(0);" title="img/index2.jpg">图片三</a><br />
    <a href="javascript:void(0);" title="img/index4.jpg">图片四</a>
    <p>----------------------------</p>
    <img src="img/blank.png" alt="blank"/><br />
    <p id="description">
    </p>
    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                showPic(this);
            }
        }
        function showPic(whichpic) {
            var source = whichpic.getAttribute('title'); //获取目标元素的title属性;
            var placeholder = document.getElementsByTagName('img')[0]; //获取占位符图片对象;
            placeholder.setAttribute('src', source); //图片替换
            var description = document.getElementById('description');
            description.childNodes[0].nodeValue = source;
        }
    </script>
</body>
 

注意:当html代码中<p id="description"></p>中没有空格的时候 这句代码会报错,description.childNodes[0].nodeValue = source;缘由是此时的<p>标签之间并无子节点,若在<p></p>标签之间加一个空格,这个空格就会被解析成<p>标签的子节点,即文本节点,这样description.childNodes[0].nodeValue = source;不会报错,功能完美实现;函数
 

四、在学习完JavaScript之最佳实践后http://www.cnblogs.com/GreenLeaves/p/5701873.htm
再次对JS图片库进行升级,此次升级的主要目的是：性能
 

一、使图片库可以平稳退化(即便Broswer禁用JavaScript网页仍能正常访问)学习
 

二、使图片库能向后兼容
 

三、分离JS代码到单独的JS文件
 

四、重构以前的JS代码提升JS代码的运行性能
 

五、合理的放置JS脚本
 

六、对象检测:即便老版本浏览器不支持DOM方法,网页仍能正常运行
 

七、关键元素的判断,即便关键元素缺失,网页仍能正常运行
 

第四版：
 

 
 
window.onload = prepareGallery;
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    //判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误

    //判断id为imagegallery的元素是否存在,若是不存在的话网页任能正常运行
    if (document.getElementById("imagegallery")) {
        var gallery = document.getElementById("imagegallery");
        var links = gallery.getElementsByTagName("a"); //这里不加判断是由于若是你连图片都没有,何谈功能。
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {
                //showPic(this);
                //return false;  假设showPic方法没有出现问题,return false是正确的作法,可是万一shwPic出现了问题,这个时候返回false,点击超连接将没有任何反应,
                //因此这个地方这样该更好
                return !showPic(this); //若是showPic方法出现问题,超连接任然有效符合JavaSciprt平稳退化的要求;
            }
        }
    }
}
function showPic(whichpic) {
    if (!document.getElementsByTagName("img")[0]) return false;
    var source=whichpic.getAttribute("href");//获取图片的连接地址
    var placeholder = document.getElementsByTagName("img")[0];
    if (placeholder.nodeName != "IMG") return false;
    placeholder.setAttribute("src", source);
    if (!document.getElementById("description")) return false;
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超连接的文本节点(图片名称)是否存在)
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
    return true;
}
 

 

 
 

html代码:
 

 
 
<body>
    <div id="imagegallery">
        <a href="img/index.jpg" title="dog_one">图片一</a><br />
        <a href="img/index1.jpg" title="dog_two">图片二</a><br />
        <a href="img/index2.jpg" title="dog_three">图片三</a><br />
        <a href="img/index4.jpg" title="dog_four">图片四</a>
        <p>
            ----------------------------</p>
        <img src="img/blank.png" alt="blank" /><br />
        <p id="description">
        </p>
    </div>
    <script src="picLibrary.js" type="text/javascript"></script>  <!--合理放置了JS脚本在加载完DOM后在加载JS脚本,提升了页面的加载速度,提现了内容优先的原则-->
</body>
 

 

 
 

 在学习完JavaScript动态向文档中添加元素和内容后http://www.cnblogs.com/GreenLeaves/p/5730898.html
 

再从新回到咱们的图片库,咱们发如今咱们的htm文档中有一个图片和一段文字是专门为showPic脚本服务的,若能把结构和行为分离天然是最好的，既然这些元素的存在,是为了让DOM方法来处理它们,那么用DOM方法来建立他们才是最合适的选择。
 

第五版：
 

 
 
window.onload = prepareGallery;
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.createElement) return false;
 if (!document.createTextNode) return false;
    if (!document.getElementsByTagName) return false;
    //判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误
    //判断id为imagegallery的元素是否存在,若是不存在的话网页任能正常运行
    if (document.getElementById("imagegallery")) {
        var gallery = document.getElementById("imagegallery");
        var placeholder = document.createElement("img"); //建立一个图片展现容器
        placeholder.setAttribute("id", "placeholder");
        placeholder.setAttribute("src", "../img/blank.jpg");
        var description = document.createElement("p"); //建立描述
        description.setAttribute("id", "description");
        var desctxt = document.createTextNode("chose an image");
        description.appendChild(desctxt);
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(placeholder);
        body.appendChild(description);
        var links = gallery.getElementsByTagName("a"); //这里不加判断是由于若是你连图片都没有,何谈功能。
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {
                //showPic(this);
                //return false;  假设showPic方法没有出现问题,return false是正确的作法,可是万一shwPic出现了问题,这个时候返回false,点击超连接将没有任何反应,
                //因此这个地方这样该更好
                return !showPic(this); //若是showPic方法出现问题,超连接任然有效符合JavaSciprt平稳退化的要求;
            }
        }
    }
}
function showPic(whichpic) {
    var source = whichpic.getAttribute("href");//获取图片的连接地址
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超连接的文本节点(图片名称)是否存在)
    document.getElementById("description").firstChild.nodeValue = text;
    return true;
}
 

 

html代码:
 

 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div id="imagegallery">
        <a href="../img/index.jpg" title="dog_one">图片一</a><br />
        <a href="../img/index1.jpg" title="dog_two">图片二</a><br />
        <a href="../img/index2.jpg" title="dog_three">图片三</a><br />
        <a href="../img/index4.jpg" title="dog_four">图片四</a>
    </div>
    <script src="jsPic.js"></script>  <!--合理放置了JS脚本在加载完DOM后在加载JS脚本,提升了页面的加载速度,提现了内容优先的原则-->
</body>
</html>
 

 


这个版本的图片库的结构和行为分离的已经很完全了,可是仍是有个问题,由于这里的图片连接列表恰好是<body>部分的最后一个元素,若是在这个图片列表以后还有其余的一些元素？咱们该怎么作?咱们最初的想法是想让新建立的元素牢牢的跟在图片清单的后面,并且无论清单出如今哪一个位置。因此这个图片库的版本还有待改进!
 

 
 

在学了经过insertAfter()和insertBefore()向指定元素位置的地方加入元素以后http://www.cnblogs.com/GreenLeaves/p/5731614.html
 

咱们结合以前全部的学习内容对JS图片库再作一次改进,代码以下:
 

第六版：
 

utility.js  公共库
 

 
 
/*
window.onload事件(当页面加载完毕时须要调用的事件,也就是说当咱们在开发中须要调用一些JS函数在页面加载完毕后执行的能够和这个事件绑定)
可是这个事件只能绑定一个函数,若是再次绑定原先的事件会被覆盖掉.因此这个方法就是将页面加载完毕以后须要的函数建立一个队列,而后将须要执行的函数一个个添加
到队列里面;
@param func  -须要添加到队列里面的函数
*/
function addOnloadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func; //若是window.onload事件没有绑定任何function则正常绑定
    }
    else {
        //若是window.onload事件已经绑定了函数,则在原来的基础上,继续添加新的函数
        window.onload = function () {
            oldonload();
            func();
        };
    }
}


/*
addOnloadEvent的扩展版由于每次添加一个函数都须要调用addOnloadEvent()函数,因此为了节省代码,将须要绑定的函数名写入到一个数组里面,
而后将数组引用,传递给addOnloadEventlist();每次添加,只需将函数名,写到数组里面便可
@param eventlist  -须要与window.onload事件绑定的函数名数组
*/
function addOnloadEventlist(eventlist) {
    if (!eventlist) return false;
    var oldonload = window.onload;
    window.onload = function () {
        for (var i = 0; i < eventlist.length; i++) {
            eventlist[i]();
        }
    }

}


/*
向目标元素以后添加新的元素
@param newElement=新元素
@param targetElement=目标元素
*/
function insertAfter(newElement, targetElement) {
    /*
    编写逻辑
    一、首先找到给出咱们须要插入的元素和用来定位的目标元素
    二、根据目标元素找到两个元素的父元素
    三、判断目标元素是否是父元素内的惟一的元素.
    四、若是是,向父元素执行追加操做,就是appendChild(newElement)
    五、若是不是,向目标元素的以后的紧接着的节点以前执行inserBefore()操做
    */
    var parentElement = targetElement.parentNode; //find parent element
    if (parentElement.lastChild == targetElement)//To determime肯定,下决心 whether the last element of the parent element is the same as the target element 
    {
        parentElement.appendChild(newElement);
    } else {
        parentElement.insertBefore(newElement, targetElement.nextSibling);
    }
}
 

 

 
 

index.js
 

 
 
function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return false;
    if (!document.getElementById("description")) return false;
    var placeholder = document.getElementById("placeholder");
    var description = document.getElementById("description");
    var source = whichpic.getAttribute("href"); //获取图片的连接地址
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超连接的文本节点(图片名称)是否存在)
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
    }
    else {
        return false;
    }
    return true;
}

function preparePlaceholder() {
    if (!document.getElementById) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementsByTagName) return false;
    //判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误
    //判断id为imagegallery的元素是否存在,若是不存在的话网页任能正常运行
    if (document.getElementById("imagegallery")) {
        var gallery = document.getElementById("imagegallery");
        var placeholder = document.createElement("img"); //建立一个图片展现容器
        var description = document.createElement("p"); //建立描述
        var desctxt = document.createTextNode("chose an image");
        placeholder.setAttribute("id", "placeholder");
        placeholder.setAttribute("src", "../img/blank.png");
        description.setAttribute("id", "description");
        description.appendChild(desctxt);
        insertAfter(placeholder, gallery);
        insertAfter(description,placeholder);
    }
}
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a"); //这里不加判断是由于若是你连图片都没有,何谈功能。
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            //showPic(this);
            //return false;  假设showPic方法没有出现问题,return false是正确的作法,可是万一shwPic出现了问题,这个时候返回false,点击超连接将没有任何反应,
            //因此这个地方这样该更好
            return !showPic(this); //若是showPic方法出现问题,超连接任然有效符合JavaSciprt平稳退化的要求;
        }
    }
}
var eventlist = [preparePlaceholder, prepareGallery];
addOnloadEventlist(eventlist);
 

 

 
 

html文件:
 

 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/utility.js" type="text/javascript"></script> 
    <script src="../js/index.js" type="text/javascript"></script>
</head>
<body>
    <div id="imagegallery">
        <a href="../img/index.jpg" title="dog_one">图片一</a><br />
        <a href="../img/index1.jpg" title="dog_two">图片二</a><br />
        <a href="../img/index2.jpg" title="dog_three">图片三</a><br />
        <a href="../img/index4.jpg" title="dog_four">图片四</a>
    </div>
</body>
</html>
 

 

如今图片库真正的作到了,结构、样式和行为完全分离;
 

不过、这里还能够作下改进，将超连接的内容改为图片的缩略图、就是一个使用的图片库了。


        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程