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

207 阅读 0 评论 137 点赞

我是靠谱客的博主幽默唇膏，最近开发中收集的这篇文章主要介绍JQuery 图片延迟加载并等比缩放插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近在学习JS的OOP所以写了这么个东西
使用方法：
$(".viewArea img").zoom({height:74,width:103});
效果演示：
http://demo.uoften.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); 