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 webuploader分片上传大文件的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
今天小编就为大家分享一篇解决jQuery使用append添加的元素事件无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
jQuery Validation Engine验证控件调用外部函数验证的方法
这篇文章主要介绍了jQuery Validation Engine验证控件调用外部函数验证的方法，需要的的朋友参考下吧2017-01-01
这篇文章主要介绍了基于jQuery实现收缩展开功能的相关资料,需要的朋友可以参考下2016-03-03
jQuery javaScript捕获回车事件(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
在本篇内容里小编给大家分享了jQuery获取特殊属性的值以及设置内容相关知识点，有需要的朋友们参考下。2018-11-11
Jcrop是基于JQuery的图片裁剪插件，这里简单介绍下基本参数，需要的朋友可以参考下2013-07-07
Jquery Easyui日历组件Calender使用详解（23）
这篇文章主要为大家详细介绍了Jquery Easyui日历组件Calender的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jQuery插件echarts去掉垂直网格线用法,结合实例形式对比分析了jQuery图标插件echarts针对垂直网格线的相关设置操作技巧,需要的朋友可以参考下2017-03-03
本文给大家分享的是一则使用jQuery实现图片切换的插件，效果非常不错，兼容性也很好，推荐给大家，有需要的小伙伴快来参考下吧。2015-03-03
最新评论