JQuery 图片延迟加载并等比缩放插件

  最近在学习JS的OOP所以写了这么个东西

  使用方法:

  $(".viewArea img").zoom({height:74,width:103});

  效果演示:

  http://demo.glzy8.com/html/jquery_img/jquery_img.htm

  代码:

  

复制代码 代码如下:

  (function($){

  $.fn.zoom = function(settings){

  //一些默认配置;

  settings = $.extend({

  height:0,

  width:0,

  loading:"lightbox-ico-loading.gif"

  },settings);

  var images = this;

  $(images).hide();

  var loadding = new Image();

  loadding.className="loadding"

  loadding.src = settings.loading;

  $(images).after(loadding);

  //预加载

  var preLoad = function($this){

  var img = new Image();

  img.src = $this.src;

  if (img.complete) {

  processImg.call($this);

  return;

  }

  //$this.src = loadding.src;//会导致获取错误的尺寸

  img.onload = function(){

  //$this.src = this.src; //会导致获取错误的尺寸

  processImg.call($this);

  img.onload=function(){};

  }

  }

  //计算图片尺寸;

  function processImg(){

  //if(settings.height===0||settings.width ===0) return;

  var m = this.height-settings.height;

  var n = this.width - settings.width;

  if(m>n)

  this.height = this.height>settings.height ? settings.height :

  this.height;

  else

  this.width = this.width >settings.width ? settings.width :

  this.width;

  $(this).next(".loadding").remove()

  $(this).show();

  }

  return $(images).each(function(){

  preLoad(this);

  });

  }

  })(jQuery);

  效果是这样的:

JQuery 图片延迟加载并等比缩放插件