Jquery loads Image Code

This is a professional jquery plug-in. It is used for Jquery image loading. It also centers images and is compatible with all browsers.

This is a professional jquery plug-in. It is used for Jquery image loading. It also centers images and is compatible with all browsers.

(Function ($ ){
Var defaultOptions = {// Pre-define some default option values.
LoadingOnly: false,
PlaceHolderURL: null,
NewWidth: 0,
NewHeight: 0,
FadeInSpeed: 0,
ContainerWidth: 0,
ContainerHeight: 0,
AllowEnlarge: false,
OnComplete: null,
OnFail: null
};
 
$. Fn. extend (
{
AjaxLoadImg: function (imgURL, options)
{Return this. each (function () {return $. ajaxLoadImg (this, imgURL, options );});},

ResizeImg: function (newWidth, newHeight, allowEnlarge)
{Return this. each (function () {return $. resizeImg (this, newWidth, newHeight, allowEnlarge );});},

AlignImg: function (containerWidth, containerHeight)
{Return this. each (function () {return $. alignImg (this, containerWidth, containerHeight );});}
}
);
 
$. AjaxLoadImg = function (loadingImg, imgURL, opt ){
LoadingImg = $ (loadingImg );

If (typeof (imgURL )! = 'String' | imgURL = opt. placeHolderURL) return loadingImg; // If it is not an image or imgURL is not set correctly, do nothing.
Opt = $. extend ({}, defaultOptions, opt); // Use function opt to override default opt.

LoadingImg. load (loadingImgHandler). attr ('loadingstatus', 'loading'); // Set the image status to be loading (in progress ).
Var newImg = $ (''). load (newImgHandler). error (newImgHandler). bind ('abort ', newImgHandler); // Create an new Image object.
 
! Opt. loadingOnly & opt. placeHolderURL?
NewImg. attr ('src', opt. placeHolderURL): newImg. attr ('src', imgURL );

Return loadingImg;
 
Function newImgHandler (e ){
If (newImg. attr ('src') = opt. placeHolderURL) // Finish loading the placeholder image
{
LoadingImg. attr ('src', opt. placeHolderURL );
NewImg. attr ('src', imgURL );
} Else {// Finish loading the target image
If (e. type = 'abort '| e. type = 'error') // Loading the target image but failed
{
LoadingImg. attr ('loadingstatus', 'failed ');

If (opt. onFail)
Opt. onFail (loadingImg [0]);
}
Else if (opt. loadingOnly)
LoadingImg. attr ('src', newImg. attr ('src '));
Else
LoadingImg. hide (). attr ('src', newImg. attr ('src '));

If (newImg. unbind ){
NewImg. unbind ('load'). unbind ('error'). unbind ('abort '); // Some cleanup work
NewImg = null;
}
}
}
 
Function loadingImgHandler (e ){
If (loadingImg. attr ('src') = opt. placeHolderURL)
LoadingImg. hide (). alignImg (opt. containerWidth, opt. containerHeight). show ();

Else if (loadingImg. attr ('src') = imgURL)
{
If (! Opt. loadingOnly)
{
LoadingImg. resizeImg (opt. newWidth, opt. newHeight, opt. allowEnlarge)
. AlignImg (opt. containerWidth, opt. containerHeight );

Opt. fadeInSpeed? LoadingImg. fadeIn (opt. fadeInSpeed): loadingImg. show ();
}

LoadingImg. attr ('loadingstatus', 'completed ');

If (loadingImg. unbind)
LoadingImg. unbind ('load'). unbind ('error'). unbind ('abort '); // Some cleanup work

If (opt. onComplete)
Opt. onComplete (loadingImg [0]);

}
}
};
 
$. ResizeImg = function (objImg, newWidth, newHeight, allowEnlarge ){
ObjImg = $ (objImg );
Var imgWidth = objImg. width ();
Var imgHeight = objImg. height ();

If (! ImgWidth |! ImgHeight |! NewWidth |! NewHeight)
Return objImg;

Var hRatio, wRatio, Ratio = 1;

WRatio = newWidth/imgWidth;
HRatio = newHeight/imgHeight;
Ratio = (wRatio <= hRatio? WRatio: hRatio );

If (Ratio> 1 &&! AllowEnlarge)
Ratio = 1;

Return objImg. width (imgWidth * Ratio). height (imgHeight * Ratio );
};
 
$. AlignImg = function (objImg, containerWidth, containerHeight ){
ObjImg = $ (objImg );

If (! ObjImg. height () |! ObjImg. width ())
Return objImg;

If (objImg. height () <containerHeight-1)
ObjImg.css ('margintop', (containerHeight-objImg. height ()/2 + 'px ');

If (objImg. width () <containerWidth-1)
ObjImg.css ('margin-left', (containerWidth-objImg. width ()/2 + 'px ');

Return objImg;
};
 
}) (JQuery );

// Instance </img>