基于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中插件实现自动添加用户的具体代码
Nov 15 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
js中new一个对象的过程
Feb 20 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python根据文件大小打log日志
2014/10/09 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python datetime包函数简单介绍
2019/08/28 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
婚前协议书怎么写
2014/04/15 职场文书
学校读书活动总结
2014/06/30 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
python利用while求100内的整数和方式
2021/11/07 Python