雨夜带刀's Blog

IE6中请求莫名中断

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

图片延迟加载的实现

图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果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 元素进行遍历,然后再排序,最后再过滤,这种方法稍后再说。

javascript选择器的那些事儿

象 CSS 选择器那样,在 javascript 中用同样的语法来选取一个或一组 DOM 元素,这种简便的语法在目前的 javascript 选择器领域中算是事实上的标准了,jQuery 的成功也与它的选择器(sizzle)的易用是密不可分。

各大 javascript 框架和类库都有一套独自的选择器,我花了点时间自己开发了一套选择器,在性能测试方面也不输给 jQuery 的 sizzle。在 javascript 选择器的开发过程中,学到了不少东西,这些东西如果自己不去开发,估计永远也没机会学到。现在,对于 javascript 选择器的原理以及如何去实现都有了一定的了解,在这里,我觉得有必要将一些心得记录下来,并分享给有需要的人。

jQuery 在 CSS3 的选择器出来以前,就实现了很多自己私有的选择器,虽然这些私有的选择器在日常的应用中使用率都不太高,但是其作为一个类库,要适应和兼容各种场景,面对各种技术水平的web开发者,这些私有选择器还是有不小的用处,甚至可以说,CSS3 的选择器在一定程度上也吸纳了 jQuery 的私有选择器的思想,在它的基础上再做一些改良,使之成为现在的 W3C 标准

也谈javascript数组去重

有时会碰上这种需求,需要将数组中重复的元素删除掉,而只保留一个。最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素,代码如下所示:

方法1:

Array.prototype.distinct = function(){
	var arr = [],
	     len = this.length;

	for ( var i = 0; i < len; i++ ){
		for( var j = i+1; j < len; j++ ){
			if( this[i] === this[j] ){
				j = ++i;
			}
		}
		arr.push( this[i] );
	}
	return arr;
};

使用方法1如果碰到数据比较多时性能上会差很多。那么请继续看下面的方法。

方法2:

Array.prototype.distinct = function(){
	
	var self = this,
		arr = self.concat().sort(); // 创建一个新数组并排序
	
	arr.sort(function( a, b ){
		if( a === b ){
			var n = self.indexOf( a ); //获取索引值
			self.splice( n, 1 );
		}
	});
		
	return self;
	
};
头像

雨夜带刀

主要折腾前端
现居北京

第 11 页,共 18 页« 最新...910111213...最旧 »