Jquery加载图片代码

(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); 

//实例