基于jquery的图片懒加载js


Posted in Javascript onJune 30, 2010

以下是实现代码(基于jquery):

function lazyload(option){ 
var settings={ 
defObj:null, 
defHeight:0 
}; 
settings=$.extend(settings,option||{}); 
var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img"); 
var pageTop=function(){ 
return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight; 
}; 
var imgLoad=function(){ 
defObj.each(function(){ 
if ($(this).offset().top<=pageTop()){ 
var src2=$(this).attr("src2"); 
if (src2){ 
$(this).attr("src",src2).removeAttr("src2"); 
} 
} 
}); 
}; 
imgLoad(); // 绑定滚动事件 
$(window).bind("scroll",function(){ 
imgLoad(); 
}); 
} 
lazyload({ 
defObj:"#plist" 
})
Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
node.js 动态执行脚本
Jun 02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
CSS和Javascript简单复习资料
Jun 29 #Javascript
javascript与CSS复习(三)
Jun 29 #Javascript
javascript与CSS复习(二)
Jun 29 #Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 #Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 #Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 #Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 #Javascript
You might like
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
Postman动态获取返回值过程详解
2020/06/30 Javascript
python模块之re正则表达式详解
2017/02/03 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
教师的实习自我鉴定
2013/12/17 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
初中学生评语大全
2014/04/24 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
团队激励口号
2014/06/06 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
工作简报范文
2015/07/21 职场文书