基于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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
简述JS控制台的使用
Jul 15 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php实现的ping端口函数实例
2014/11/12 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
浅谈django中的认证与登录
2016/10/31 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python之os操作方法(详解)
2017/06/15 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
兼职业务员岗位职责
2014/01/01 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
给老婆的检讨书
2015/01/27 职场文书
假期读书倡议书3篇
2019/08/19 职场文书