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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
原生JavaScript实现留言板
Jan 10 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
2014年质检工作总结
2014/11/26 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
React自定义hook的方法
2022/06/25 Javascript