社区
JavaScript
帖子详情
求一个你们在用的,效果很好的,兼容all的,简单的图片延迟加载JS代码
bennman
2011-08-04 10:15:04
如题,自己不会写,看到淘宝,凡客,麦考林 == 用的都不同 不知道哪个好!
给一个你们在用的吧 亲!
...全文
128
4
打赏
收藏
求一个你们在用的,效果很好的,兼容all的,简单的图片延迟加载JS代码
如题,自己不会写,看到淘宝,凡客,麦考林 == 用的都不同 不知道哪个好! 给一个你们在用的吧 亲!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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);
3天业界好评一致的jQuery教程(含资料)
jQuery还有
一个
比较大的优势是,它的文档说明很全,而且各种 应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持
代码
和html内容分离,也就是说,不用再在html里面插入一堆
js
来调用...
Gerrit
代码
Review入门实战
Gerrit review
代码
审核视频教程,Gerrit是Google为Android系统研发量身定制的一套免费开源...从我们实际使用
效果
看,Gerrit在核心
代码
质量控制、知识传承、团队培养等方面都具备很高的实用价值,推荐广大开发团队使用。
【Webpack5.x / Webpack】模块化打包工具.实战视频教
由浅入深,情景教学、案例教学 作为
一个
现代javascript 应用程序的静态模块打包器,webpack能将各种资源,如
js
,css,
图片
等作为模块来处理,是当下前端工程化的
一个
很受欢迎的工具,webpack目前最新的版本是4.0。...
用C++和Go开发Node.
js
和Electron本地模块
那么为什么要开发本地模块呢?理由至少有如下3个: 1. 保护敏感
代码
(因为JavaScript
代码
... 集成第三方程序库(很多有实用价值的程序库都不是用
js
写的,通过本地模块可以将这些程序库基础到node.
js
和electron应用中。
JS
完全解析第二章 - 客户端
JS
和ECMA基础
浏览器多种多样,面对着不同的浏览器,
JS
的支持率也是各有不同,有的高,有的低,而再加上各浏览器对浏览器对象有不同的支持,如何在不同的浏览器上表现出一致的
JS
就成了
一个
很大的难题,也就是我们所说的
兼容
性。...
JavaScript
87,901
社区成员
224,618
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章