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

[bennman]

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

[lin1658]

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

[lin1658]

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

[bennman]

[Quote=引用 2 楼 lin1658 的回复:]

另外可以使用jquery.lazyload.js，这个更方便
[/Quote]
谢谢，你说的textarea是延迟加载某一部分的代码 这个不需要

jquery.lazyload.js 这个 我知道官方（老外写的）的是不兼容的
不知道有米有被人改好，能否提供兼容all的

[bennman]

自己顶...