求一个你们在用的，效果很好的，兼容all的，简单的图片延迟加载JS代码

Question

如题，自己不会写，看到淘宝，凡客，麦考林 == 用的都不同 不知道哪个好！
给一个你们在用的吧 亲！

Answer 1

原理很简单，三步: 
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);

Answer 2

另外可以使用jquery.lazyload.js，这个更方便

Answer 3

谢谢，你说的textarea是延迟加载某一部分的代码 这个不需要jquery.lazyload.js 这个  我知道官方（老外写的）的是不兼容的
不知道有米有被人改好，能否提供兼容all的