基于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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
js实现简单的轮播图效果
Dec 13 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js运动应用实例解析
2015/12/28 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
js实现聊天对话框
2020/02/08 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python实现随机漫步算法
2018/08/27 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
租赁协议书范本
2014/04/22 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
郭明义观后感
2015/06/08 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
MySQL创建定时任务
2022/01/22 MySQL