Jquery加载图片代码

JQuery

1个成员

Jquery加载图片代码

发表于 2017-01-04 • 3150 次查看

这是一个专业的jquery 插件哦，用来做Jquery图片加载效果的，同时解决的图片居中并兼容所有浏览器

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 = $('<img/>').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');