首先将插件在jq后面引入
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") {
o.attr("src",url);
} else {
o.load(url);
}
data.obj = null;
}
}
});
return false;
};
loading();
$(window).bind("scroll",loading);
};
})(jQuery);
然后在底部初始化
rush:js;">
$(document).ready(function () {
//实现图片慢慢浮现出来的效果
$("img").load(function () {
//图片默认隐藏
$(this).hide();
//使用fadeIn特效
$(this).fadeIn("5000");
});
// 异步加载图片，实现逐屏加载图片
$(".scrollLoading").scrollLoading();
});
rush:xhtml;">
data-url表示将要异步加载的图片，src表示首先加载的图片（一般会是小图片，或者是一个动画，网页中全部的src链接同一个图片，这样网页就加载快好多，这个时候再异步的加载要加载的图片，也就现在要说的功能）
