读书人

图片加载的事件解决办法

发布时间: 2012-09-18 16:21:42 作者: rapoo

图片加载的事件
请教高手们怎么做以下效果:
1、图片加载前先显示一张加载中的底图,在加载完毕后换成目标图片。
2、当目标图片不存在、加载失败时,显示本地的指定图片。

[解决办法]

JScript code
 /** * 图片预加载 */jQuery.fn.LoadImage=function(scaling,width,height,loadpic){    if(loadpic==null)loadpic="images/loading.gif";    return this.each(function(){        var t=$(this);        var src=$(this).attr("src")        var img=new Image();        img.src=src;        //自动缩放图片        var autoScaling=function(){            if(scaling){                            if(img.width>0 && img.height>0){                     if(img.width/img.height>=width/height){                         if(img.width>width){                             t.width(width);                             t.height((img.height*width)/img.width);                         }else{                             t.width(img.width);                             t.height(img.height);                         }                     }                     else{                         if(img.height>height){                             t.height(height);                             t.width((img.width*height)/img.height);                         }else{                             t.width(img.width);                             t.height(img.height);                         }                     }                 }             }            }        if(img.complete){            autoScaling();            return;        }        $(this).attr("src","");        var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />");                t.hide();        t.after(loading);        $(img).load(function(){            autoScaling();            loading.remove();            t.attr("src",this.src);            loading.remove();            t.show();        });            });} 

读书人网 >CSS

热点推荐