基于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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
JS控制输入框内字符串长度
May 21 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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语法速查表
2006/12/06 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
详解python深浅拷贝区别
2019/06/24 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
如何查看python关键字
2021/01/17 Python
上海微创软件面试题
2012/06/14 面试题
爸爸的花儿落了教学反思
2014/02/20 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
2014年中秋寄语
2014/08/11 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python