基于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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
js查找节点的方法小结
Jan 13 Javascript
详解Bootstrap插件
Apr 25 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 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
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP中“=&gt;
2019/03/01 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
微信小程序签到功能
2018/10/31 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
django站点管理详解
2017/12/12 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
使用python去除图片白色像素的实例
2019/12/12 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
授权委托书范本
2014/04/03 职场文书
教师教学评估方案
2014/05/09 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript