基于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 10 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JS中Location使用详解
May 12 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
一些实用性较高的js方法
Apr 19 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
百度地图api如何使用
2015/08/03 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python3 shelve模块的详解
2017/07/08 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
初中班主任评语
2014/04/24 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
nginx容器方式反向代理实战
2022/04/18 Servers