平稳退化，JS和HTML标记分离，极致性能的JavaScript图片库

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>JavaScript图片库</title>
 6 <script type="text/javascript" src="placeholder.js"></script>
 7 </head>
 8 <body>
 9 <ul id="gallery">
10     <li><a href="image/1 (1).jpg" title="不错的毛玻璃1">毛玻璃1</a> </li>
11     <li><a href="image/1 (2).jpg" title="不错的毛玻璃2">毛玻璃2</a> </li>
12     <li><a href="image/1 (3).jpg" title="不错的毛玻璃3">毛玻璃3</a> </li>
13     <li><a href="image/1 (4).jpg" title="不错的毛玻璃4">毛玻璃4</a> </li>
14 </ul>
15 <img id="placeholder" src="image/placeholder.jpg" alt="My Image Gallery" />
16 <p id="description">Choose an image</p>
17 </body>
18 </html>

placeholder.js

 1     <!--平稳退化，JS和HTML标记分离，极致性能的JS图片库-->
 2     function showPic(whichPic){
 3         var placeholder=document.getElementById("placeholder");
 4         if(!placeholder){
 5             return false;
 6         }
 7         var source=whichPic.getAttribute("href");
 8         placeholder.setAttribute("src",source);
 9         var desc=document.getElementById("description");
10         if(desc){
11             var text=whichPic.getAttribute("title");
12             desc.childNodes[0].nodeValue=text;
13         }
14         return true;
15     }
16     function bind(){
17         if(!document.getElementById){
18            return false;
19         }
20         if(!document.getElementsByTagName){
21             return false;
22         }
23         var myGallery=document.getElementById('gallery');
24         var a=myGallery.getElementsByTagName("a");
25         for(var i=0;i< a.length;i++){
26             a[i].onclick=function(){
27                 return !showPic(this);
28             }
29         }
30     }
31     window.onload=bind;

 

posted @ 2016-01-17 23:28  钢铁侠Mac  阅读(260)  评论(0)  编辑  收藏  举报