jquery图片延时加载

有几处小问题，改动下，顺便绑定两个自定义事件

项目需求，需要仿微博即时信息滚动那个效果，两点：
1、图片延时加载
2、无限循环滚动

想找个jquery插件，没发现太靠谱的，那个老早出来的jquery.lazyload.js怎么不能用了呢，自己写个吧。

原理很简单，三步:
1、把要延时的html片段放到textarea标签下；
2、获得textarea的value值，用正则表达式替换图片地址，并把实际地址设置成img自定义属性realsrc；
3、动态append预加载的dom。

具体实现如下：

(function($){
	$.fn.dScroll=function(opts){
		opts=$.extend({
			itemSelector:'.item'	//列表
			,acSelector:'.append-content'	//追加textarea容器
			,blankImgSrc:'images/s.gif'	//占位符
			,scrollTime:1000
			,delayTime:3000
		},opts);
		return this.each(function(){
			//初始化
			var $inner	//里面包一层
				,$me=$(this)
				,$initShowItems=$me.find(opts.itemSelector)	//初始化可见的列表项
				,$acWrapper=$(opts.acSelector,$me)	//追加textarea容器
				,acValue=$acWrapper.val()	//要追加的内容
				,$ac	//追加内容的jquery对象
				,appendMark=false	//追加结束标记
				,blankImgSrc=opts.blankImgSrc	
				,cur=0	//最顶端的列表项index
				,initShowItemsNum=$initShowItems.length	//初始化可见的列表项数目
				,realItemsNum //实际列表项数目
				,tid	//setInterval句柄
				,events;
			//清除append容器
			$acWrapper.remove();
			//init wrapper
			$me.height($me.height()).css({
				'overflow':'hidden'
			});
			//将图片实际地址变成img的特殊属性，留待以后替换
			acValue=acValue.replace(/<(img[^>]*) src="([^"]*)"([^>]*)/gi,function(p0,p1,p2,p3){
				return "<"+p1+' src="'+blankImgSrc+'" realsrc="'+p2+'"'+p3;
			});
			//生成dom
			$ac=$(acValue).filter(opts.itemSelector);
			//用相对定位控制滚动
			$initShowItems.wrapAll('<div class="inner" />');
			$inner=$me.children('.inner').css({
				'position':'relative'
				,'top':'0px'
				,'left':'0px'
			});
			var scrollFn=function(){
				var $newItem
					//,curScrollTop=$me.scrollTop()
					,moveDis=0;
				if(!appendMark){	//如果追加没结束
					$newItem=$ac.eq(cur);
					if($newItem.length>0){
						//替换为真实图片地址
						$newItem.find('img').each(function(){
							$(this).attr('src',$(this).attr('realsrc'));
						});
						$newItem.appendTo($inner);
						
					}else{	//追加结束
						//获得实际item数目
						realItemsNum=initShowItemsNum+cur+1;
						$inner.find(opts.itemSelector).clone().appendTo($inner);
						appendMark=true;
					}
				}
				if(appendMark&&cur===(realItemsNum-1)){
					cur=0;
					$inner.css({
						top:0
					});
				}
				//移动距离
				moveDis=$inner.stop(true,true).position().top-$me.find(opts.itemSelector).eq(cur).outerHeight(true);
				$inner.animate({
					top:moveDis
				},opts.scrollTime,function(){
					cur++;
				});
			}		
			tid=setInterval(scrollFn,opts.delayTime);
			//鼠标悬浮就不要滚了
			$me.hover(function(){
				clearInterval(tid);
			},function(){
				tid=setInterval(scrollFn,opts.delayTime);
			});
			//监听外部事件变化
			$me.bind('stopdscroll',function(e){
				clearInterval(tid);
			});
			$me.bind('restartdscroll',function(e){
				clearInterval(tid);
				tid=setInterval(scrollFn,opts.delayTime);
			});
		});
	}
})(jQuery);

评论

4 楼 yuvista 2011-06-02  

感觉这方法 ，比较非主流

3 楼 wangyj0898 2011-05-31  

哎，自己功力尚浅，看的还有点困难，不过感觉真的是很不错·！

2 楼 十三‘’ 2011-05-30  

BoneWG 写道

引用:
  把要延时的html片段放到textarea标签下

构建json数据,然后js拼字符串不更省流量吗,也省的写正则,而且你这样写的话只是一些条目不停循环,并不是实时更新数据替换,怎么不考虑ajax获取json然后拼字符串,然后实时添加并remove旧条目,这样更好啊

呵呵，适用不同的需求，ajax请求数据追加是另一种大规模数据的呈现方式了，像“无极分页”是吧

1 楼 BoneWG 2011-05-27  

引用:
  把要延时的html片段放到textarea标签下

构建json数据,然后js拼字符串不更省流量吗,也省的写正则,而且你这样写的话只是一些条目不停循环,并不是实时更新数据替换,怎么不考虑ajax获取json然后拼字符串,然后实时添加并remove旧条目,这样更好啊