jquery实现异步加载图片（懒加载图片一种方式）
首先将插件在jq后面引入
(function($){
//alert($.fn.scrollLoading);
$.fn.scrollLoading=function(options){
vardefaults={
attr:"data-url"
};
varparams=$.extend({},defaults,options||{});
params.cache=[];
$(this).each(function(){
varnode=this.nodeName.toLowerCase(),
url=$(this).attr(params["attr"]);
if(!url){
return;
}
vardata={
obj:$(this),
tag:node,
url:url
};
params.cache.push(data);
});
varloading=function(){
varst=$(window).scrollTop(),
sth=st+$(window).height();
$.each(params.cache,function(i,data){
varo=data.obj,
tag=data.tag,
url=data.url;
if(o){
post=o.position().top;
posb=post+o.height();
if((post>st&&postst&&posb
然后在底部初始化
$(document).ready(function(){
//实现图片慢慢浮现出来的效果
$("img").load(function(){
//图片默认隐藏
$(this).hide();
//使用fadeIn特效
$(this).fadeIn("5000");
});
//异步加载图片，实现逐屏加载图片
$(".scrollLoading").scrollLoading();
});
需要修改img标签为
data-url表示将要异步加载的图片，src表示首先加载的图片（一般会是小图片，或者是一个动画，网页中全部的src链接同一个图片，这样网页就加载快好多，这个时候再异步的加载要加载的图片，也就现在要说的功能）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。