基于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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
asp批量修改记录的代码
2008/06/25 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
python查看模块安装位置的方法
2018/10/16 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
2015年度残疾人工作总结
2015/05/14 职场文书
同意离婚答辩状
2015/05/22 职场文书
阿甘正传观后感
2015/06/01 职场文书
孔繁森观后感
2015/06/10 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers