attribute和property的区别

DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。

attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。

attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

hello

上面的div元素的HTML代码中有class、id还有自定义的gameid,这些特性都存放在attributes中,类似下面的形式:

[ class="box", id="box", gameid="880" ]
阅读全文 »

让document.write的广告无阻塞的加载

广告代码分析

很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。

<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/
;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>

这个javascript请求返回的是这样的一段代码:

document.write( "<a href='http://gg.5173.com/adpolestar/wayl/;" + 
"ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" + 
"pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif' " +
"border='0' width="132px" height="58px" /></a>" );

这种看似有点二的加载方式,但是你却没办法改造它,因为它本身就是第三方的。并且代码都添加了统计的功能,上面的javascript的广告链接每请求一次都会统计一次,生成的代码也有点击统计的功能,也就是说必须以这种方式来进行加载。

document.write是在页面渲染的时候同步进行的,必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容,如果广告比较多的话,就会导致页面阻塞,尤其是在页面的首屏插好几个图片尺寸比较大的这种广告,那么阻塞情况就相当明显和严重,会让用户觉得你这个网页很慢。

javascript广告的阻塞加载
阅读全文 »

IE6中请求莫名中断

&lt;p&gt;场景还原:给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在非IE6中都一切正常。&lt;/p&gt;
&lt;pre class=&quot;brush: c-sharp&quot;&gt;
&amp;lt;a href=&quot;javascript:;&quot; id=&quot;btn&quot;&amp;gt;click me&amp;lt;/a&amp;gt;
&amp;lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;var url = &#039;http://api.flickr.com/services/&#039; +
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#039;feeds/photos_public.gne?tags=car&amp;amp;&#039; +
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#039;tagmode=any&amp;amp;format=json&amp;amp;jsoncallback=?&#039;;
&amp;nbsp;&amp;nbsp;$( &#039;#btn&#039; ).click(function(){
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;$.getJSON( url, function( data ){
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;alert( data );
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;}); &amp;nbsp;&amp;nbsp;});
&amp;lt;/script&amp;gt;
&lt;/pre&gt;

阅读全文 »

图片延迟加载的实现

图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。

图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片…

阅读全文 »

DOM数组去重

之前我在也谈数组去重中介绍了普通的数组去除重复的元素,在选择器的开发过程中,会碰到这样的需求,就是删除一组DOM数组中重复的元素,使用之前的方法肯定行不通,对于 DOM 数组去重,需要另外的处理办法。什么情况下会选取重复的 DOM 元素?下面是一个比较常见的情况,先看 HTML 结构:

<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3
    <ul>
      <li>测试1</li>
      <li>测试2</li>
    </ul>
  </li>
</ul>

如果是这样的选择器:query( “ul li” ),按照从左到右的查找顺序,会先得到所有 ul 的集合。

[ ul, ul ]

得到了所有 ul 的集合,继续使用 getElementsByTagName 来查找 li,那么第1个 ul 元素就会查找到所有的 li 元素,接下来第2个也会查找到2个 li 元素,最后2个 li 元素就是重复的。这样的情况下,用常规的去重办法要将查找到的所有的 li 元素进行遍历,然后再排序,最后再过滤,这种方法稍后再说。

阅读全文 »