基于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在光标位置插入内容的实现代码
Jun 18 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
js运动事件函数详解
Oct 21 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
react用Redux中央仓库实现一个todolist
Sep 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 Streams(流)详细介绍及使用
2015/05/12 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python实现对输入的密文加密
2019/03/20 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
django实现日志按日期分割
2020/05/21 Python
python多线程和多进程关系详解
2020/12/14 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
致短跑运动员广播稿
2014/01/09 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书