相信大家见过好多随着页面滚动，动态加载图片等元素的网站，我也是，以前见了好多，只是没时间去研究，今天晚上有空，百度了一下找了一个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="/ad/img/12272857838.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
