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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python玩转PDF的各种骚操作
2019/05/06 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python实现TCP文件传输
2020/03/20 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python