基于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 相关文章推荐
document.compatMode介绍
May 21 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
typescript编写微信小程序创建项目的方法
Jan 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
PHP云打印类完整示例
2016/10/15 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JavaScript字符串对象
2017/01/14 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
js实现搜索栏效果
2018/11/16 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python实现三次样条插值
2018/12/17 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
大学生素质拓展活动方案
2014/02/11 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
模具专业自荐信
2014/05/29 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技