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

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>JavaScript图片库</title>

 <script type="text/javascript" src="placeholder.js"></script>

 </head>

 <body>

 <ul id="gallery">

     <li><a href="image/1 (1).jpg" title="不错的毛玻璃1">毛玻璃1</a> </li>

     <li><a href="image/1 (2).jpg" title="不错的毛玻璃2">毛玻璃2</a> </li>

     <li><a href="image/1 (3).jpg" title="不错的毛玻璃3">毛玻璃3</a> </li>

     <li><a href="image/1 (4).jpg" title="不错的毛玻璃4">毛玻璃4</a> </li>

 </ul>

 <img id="placeholder" src="data:image/placeholder.jpg" alt="My Image Gallery" />

 <p id="description">Choose an image</p>

 </body>

 </html>

placeholder.js

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

     function showPic(whichPic){

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

         if(!placeholder){

             return false;

         }

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

         placeholder.setAttribute("src",source);

         var desc=document.getElementById("description");

         if(desc){

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

             desc.childNodes[0].nodeValue=text;

         }

         return true;

     }

     function bind(){

         if(!document.getElementById){

            return false;

         }

         if(!document.getElementsByTagName){

             return false;

         }

         var myGallery=document.getElementById('gallery');

         var a=myGallery.getElementsByTagName("a");

         for(var i=0;i< a.length;i++){

             a[i].onclick=function(){

                 return !showPic(this);

             }

         }

     }

     window.onload=bind;

巴特西

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

最新文章

热门文章