jQuery滚动加载图片效果的实现


Posted in Javascript onMarch 06, 2013
<BR>/****************滚动加载图片函数****************/
     function scrollLoading(){ 
         var st = $(window).scrollTop(), sth = st + $(window).height(); 
         var $targetpics = $("img.scrloadpic"); 
         var len = $targetpics.length; 
         for(var i=0; i< len; i++) 
         { 
             var $temppic = $targetpics.eq(i); 
             var post = $temppic.position().top; 
             var posb = post + $temppic.height();              if((post > st && post < sth) || (posb > st && posb < sth)) 
             { 
                 var url = $temppic.attr("xsrc"); 
                 if(url != "") 
                 { 
                    $temppic.attr("src", url); 
                    $temppic.attr("xsrc", ""); 
                 } 
             } 
         } 
     }

 上面是实现滚动加载的一个功能函数;下面在html代码中需要在img中加一个xsrc属性暂时存放真实图片的路径,src中则存放loading图片的路径,为每个需要实现这个功能的图片加一个名字为“scrloadpic”的类。
<img src="load.gif" xsrc="myimgae.jpg" class="scrloadpic"/>

 最后在调用函数。
scrollLoading(); 
$(window).bind("scroll", scrollLoading);
Javascript 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
JS实现吸顶特效
Jan 08 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
HTML上传控件取消选择
Mar 06 #Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 #Javascript
JQuery操作tr和td内容的方法实例
Mar 06 #Javascript
node在两个div之间移动,用ztree实现
Mar 06 #Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 #Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 #Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 #Javascript
You might like
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
教你php如何实现验证码
2016/01/20 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
销售类个人求职信范文
2013/09/25 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
写好自荐信的要点
2013/11/06 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
百日安全生产活动总结
2014/07/05 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
管理人员岗位职责
2015/02/14 职场文书
暑假打工感想
2015/08/07 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python