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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>JavaScript图片库</title>
 6 <script type="text/javascript">
 7     <!--平稳退化,JS和HTML标记分离,极致性能的JS图片库-->
 8     function showPic(whichPic){
 9         var placeholder=document.getElementById("placeholder");
10         if(!placeholder){
11             return false;
12         }
13         var source=whichPic.getAttribute("href");
14         placeholder.setAttribute("src",source);
15         var desc=document.getElementById("description");
16         if(desc){
17             var text=whichPic.getAttribute("title");
18             desc.childNodes[0].nodeValue=text;
19         }
20         return true;
21     }
22     function bind(){
23         if(!document.getElementById){
24            return false;
25         }
26         if(!document.getElementsByTagName){
27             return false;
28         }
29         var myGallery=document.getElementById(‘gallery‘);
30         var a=myGallery.getElementsByTagName("a");
31         for(var i=0;i< a.length;i++){
32             a[i].onclick=function(){
33                 return !showPic(this);
34             }
35         }
36     }
37     window.onload=bind;
38 </script>
39 </head>
40 <body>
41 <ul id="gallery">
42     <li><a href="image/1 (1).jpg" title="不错的毛玻璃1">毛玻璃1</a> </li>
43     <li><a href="image/1 (2).jpg" title="不错的毛玻璃2">毛玻璃2</a> </li>
44     <li><a href="image/1 (3).jpg" title="不错的毛玻璃3">毛玻璃3</a> </li>
45     <li><a href="image/1 (4).jpg" title="不错的毛玻璃4">毛玻璃4</a> </li>
46 </ul>
47 <img id="placeholder" src="image/placeholder.jpg" alt="My Image Gallery" />
48 <p id="description">Choose an image</p>
49 </body>
50 </html>
时间: 2024-12-18 20:04:30

平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库的相关文章

性能、JavaScript与html标签分离、平稳退化

性能 尽量减少DOM访问和标记,减少document.getElementsByTagName()之类方法的使用,把这类方法返回的值存储在变量之中. 合并脚本.样式文件.图片文件等,一遍减少加载页面时的请求数量. 压缩脚本. JavaScript与html标签分离 当我们添加动作时,会有个第一反应: <div id="div1" onclick="doSomething(this)">Click here</div> //这边是JavaScr

链接的平稳退化、渐进增强和向后兼容

1.平稳退化<a href="http://www.baidu.com/" title="A fengxz" onclick="popPup(this.getAttribute("href"));return false;">fengxz</a>//HTML function popPup(winURL){    window.open(winURL);        }//JavaScript 即使J

平稳退化 前端

window.open()第一个参数为要链接到的url,第二个参数是新窗口的名字,可以在代码里通过这个名字与新窗口进行通信. function popUp(url){ window.open(url,"popup","width=320,height=460") } 要想创建新的浏览器窗口,可使用伪元素JavaScript:,如下所示 <a href="javascript:popUp('http://www.example.com/')"

&quot;javascript:&quot; 伪协议与平稳退化

"javascript:"伪协议是一种非标准化协议,其可以让我们通过一个链接调用javascript 函数.例如:<a href="javascript:pop('http://www.xxx');">Example</a> 但是这样也有一些问题,那就是这种形式在支持伪协议的浏览器中可以使用,但是老旧的浏览器则会尝试打开这个链接并且报错. 同时随着一些用户操作'禁用javascript'(不得不说,部分用户会禁用js以阻止一些网页弹窗,而一些

在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样?

原文:在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样? <a href="javascript:alert(this.innerHTML)" mce_href="javascript:alert(this.innerHTML)">标签</a> 上面的这段代码不能得到你想要的结果,因为在<A>标记中href属性的this对象不是指代的当前的<A>标记, 这个时候的this是

Ext JS学习第二天 我们所熟悉的javascript(一)

此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascript书籍,恶补一番.推荐书籍<javascript高级程序设计>.<javascript设计模式>. •在这里我们学习一下可能你从未接触过的javascript,这些javascript知识是我们要学好ExtJS这个框架非常有必要的.必备的知识.我们需要掌握的内容有: –javascri

js 获取函数的所有参数和遍历JavaScript某个对象所有的属性名称和值的方法

获取所有参数 function test(){ for(var i=0;i<arguments.length;i++)  document.write(arguments[i]); } 遍历某个对象所有的属性名称和值的方法 <script language="javascript"> var obj = new Object(); obj.myname = "我是对象"; obj.pro2 = "23"; obj.pro3 = 

Node.js是一个事件驱动I/O服务端JavaScript环境

Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎.目的是为了提供撰写可扩充网络程序,如Web服务.第一个版本由Ryan Dahl于2009年发布,后来,Joyent雇用了Dahl,并协助发展Node.js. 其他编程语言的类似开发环境,包含Twisted于Python,Perl Object Environment于Perl,libevent于C,和EventMachine于Ruby.与一般JavaScript不同的地方,Node.js并不是在Web浏

使用js加载器动态加载外部Javascript文件

今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 MiniSite.Browser={ 6 ie:/msie/.test(window.navigator.userAgent.toLowerCase()), 7 moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), 8 opera:/o