Copy codeThe Code is as follows:
/*
******************
/// Author: no sword (2008-06-23)
// Http://regedit.cnblogs.com
/// Description: A loading flag is displayed before the image is loaded. After the image is downloaded, the image is displayed.
Whether the image can be scaled automatically
This plug-in allows you to load pages first, while loading images later,
It solves the problem of large la s During Scaling only when the image is displayed.
/// Parameter settings:
Auto scaling of scaling or not
Width: Maximum Image Height
Height: Maximum image width
Path of the image loaded by loadpic
*/
JQuery. fn. LoadImage = function (scaling, width, height, loadpic ){
If (loadpic = null) loadpic = "load3.gif ";
Return this. each (function (){
Var t = $ (this );
Var src = $ (this). attr ("src ")
Var img = new Image ();
// Alert ("Loading ")
Img. src = src;
// Auto Scaling
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 );
}
}
}
}
}
// The cached image is automatically read under ff.
If (img. complete ){
// Alert ("getToCache! ");
AutoScaling ();
Return;
}
$ (This). attr ("src ","");
Var loading = $ (" ");
T. hide ();
T. after (loading );
$ (Img). load (function (){
AutoScaling ();
Loading. remove ();
T. attr ("src", this. src );
T. show ();
// Alert ("finally! ")
});
});
}
Instructions for use:
$ ("Div img"). LoadImage (true, 120,90 );
The effect is as follows:
Test address http://img.jb51.net/online/jqueryLoadImage/demo.htm
Package and download files