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

bennman 2011-08-04 10:15:04
如题,自己不会写,看到淘宝,凡客,麦考林 == 用的都不同 不知道哪个好!
给一个你们在用的吧 亲!
...全文
128 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
bennman 2011-08-04
  • 打赏
  • 举报
回复
自己顶...
bennman 2011-08-04
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 lin1658 的回复:]

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

jquery.lazyload.js 这个 我知道官方(老外写的)的是不兼容的
不知道有米有被人改好,能否提供兼容all的
lin1658 2011-08-04
  • 打赏
  • 举报
回复
另外可以使用jquery.lazyload.js,这个更方便
lin1658 2011-08-04
  • 打赏
  • 举报
回复
原理很简单,三步:
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);

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧