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);

posted @ 2011-07-05 09:50  sky7034  阅读(469)  评论(0编辑  收藏  举报
蘑菇街女装 货运专家