jQuery页面滚动 动态加载图片等元素

相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不多说,贴代码:

使用代码:

 

<html><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
<head>
<title>scrollLoadingImg by zhaozi</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrollLoading-min.js"></script>
<style type="text/css">
.loadingImg{background:url(loading.gif) no-repeat center;}
</style>
<script type="text/javascript">
$(function(){
$(".loadingImg").scrollLoading();
})
</script>
</head>
<body>
<img class="loadingImg" src="pixel.gif" data-url="http://www.hb114.cc/ad/img/201012272857838.gif" width="300" height="300" />
</body>
</html>

 

说明:.

 

loadingImg //给图片加个正在加载的图片

 

pixel.gif  //1像素图片

 

 

 

jquery.scrollLoading-min.js  原代码

 

(function($) {
$.fn.scrollLoading = function(options) {
var defaults = {
attr: "data-url"
};
var params = $.extend({}, defaults, options || {});
params.cache = [];
$(this).each(function() {
var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
if (!url) { return; }
//重组
var data = {
obj: $(this),
tag: node,
url: url
};
params.cache.push(data);
});

//动态显示数据
var loading = function() {
var st = $(window).scrollTop(), sth = st + $(window).height();
$.each(params.cache, function(i, data) {
var o = data.obj, tag = data.tag, url = data.url;
if (o) {
post = o.position().top; posb = post + o.height();
if ((post > st && post < sth) || (posb > st && posb < sth)) {
//在浏览器窗口内
if (tag === "img") {
//图片,改变src
o.attr("src", url);
} else {
o.load(url);
}
data.obj = null;
}
}
});
return false;
};

//事件触发
//加载完毕即执行
loading();
//滚动执行
$(window).bind("scroll", loading);
};
})(jQuery);


over

你可能感兴趣的:(jquery)