基于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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
angularJS开发注意事项
2018/05/26 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python简单程序读取串口信息的方法
2015/03/13 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python实现一个简单的验证码程序
2017/11/03 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
python使用smtplib模块发送邮件
2020/12/17 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
医院总经理职责
2013/12/26 职场文书
团队会宣传标语
2014/10/09 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏