基于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 replace 字符替换实现代码
Dec 02 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
浅谈js中变量初始化
Feb 03 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 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
php db类库进行数据库操作
2009/03/19 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python reverse反转部分数组的实例
2018/12/13 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python过滤序列元素的方法
2020/07/31 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
找工作最新求职信
2013/12/22 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
医院志愿者活动总结
2015/05/06 职场文书
学雷锋感言
2015/08/03 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
MySQL查询学习之基础查询操作
2021/05/08 MySQL
分享Python获取本机IP地址的几种方法
2022/03/17 Python