jQuery滚动加载图片效果的实现
更新时间：2013年03月06日 15:04:57 作者：
实现滚动加载的一个功能函数，需要的朋友可以参考一下
复制代码 代码如下:
<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);
相关文章
用惯jquery的用户可能习惯于连写行为，也就是说在调用一个方法之后，紧跟着调用另一个方法，如此连写不断，形成一个珍珠链，而且编写灵活，方便2012-08-08
由于分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里，处于对用户体验的考虑，我使用Jquery实现了一种类似滚动停靠的效果，感兴趣的朋友可以参考下哈2013-03-03
下面小编就为大家带来一篇checkbox批量选中,获取选中项的值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了jquery实现购物车基本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要汇总了20种jQuery 和 CSS 的文本特效插件，都是比较热门的特效插件，推荐给有需要的小伙伴。2014-12-12
这篇文章主要为大家详细介绍了jQuery实现参数自定义的文字跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
jQuery Validation PlugIn的使用方法详解
这篇文章主要介绍了jQuery Validation PlugIn的使用方法，需要的朋友可以参考下2015-12-12
这是一个基于jquery的图片效果，它的作用是：当图片点击变大(变小)时，其它图片按照一定的规则进行排序运动2012-11-11
Jquery each方法跳出循环,并获取返回值(实例讲解)
这篇文章主要是对Jquery each方法跳出循环,并获取返回值进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
下面小编就为大家带来一篇jquery实现input框获取焦点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论