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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
Node.js编码规范
2014/07/14 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
jquery实现提示语淡入效果
2017/05/05 jQuery
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python range实例用法分享
2020/02/06 Python
python接口自动化框架实战
2020/12/23 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
运动会获奖感言
2014/02/11 职场文书
会计员岗位职责
2014/03/15 职场文书
主题实践活动总结
2014/05/08 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
教师求职自荐书
2014/06/14 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
中学生自我评价2015
2015/03/03 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电