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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
.NET概念性的面试题
2012/02/29 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
股权收购意向书
2014/04/01 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
质量保证书范本
2014/04/29 职场文书
入职担保书怎么写
2014/05/12 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
商超业务员岗位职责
2015/02/13 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
redis数据结构之压缩列表
2022/03/21 Redis