JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似jQuery的封装。

这里就图片等比缩放以及预加载的效果来尝试下，写写类似的JavaScript代码。

图片等比缩放以及预加载的效果如下(预加载效果有时候会不是很明显)：

JS主要代码如下：

(function() { 
var yQuery = (function() { 
var yQuery = function() { 
return yQuery.fn.init(); 
}; 
yQuery.fn = yQuery.prototype = { 
init: function() { 
return this; 
}, 
//图片等比缩放以及预加载方法申明 但是感觉这样写(return new imgResizeBox(e))很别扭 请高手赐教 
imgResize: function(e) { 
return new imgResizeBox(e); 
} 
}; 
//image图片处理 
var imgResizeBox = function(e) { 
//image参数 
setting = { 
imgId: "", //图片的容器的ID 比如.viewArea img 
height: 0, 
width: 0, 
loading: "images/lightbox-ico-loading.gif" 
}; 
$.extend(setting, e, setting); //参数替换 
var images = $(setting.imgId); //获取所有图片 
$(images).hide(); //隐藏 
var loading = new Image(); //预加载图片 
loading.className = "loading"; 
loading.src = setting.loading; 
$(images).after(loading); 
//预加载函数 
var perLoading = function($this) { 
var img = new Image(); 
img.src = $this.src; 
if (img.complete) { 
computeImg.call($this); 
return; 
}; 
img.onload = function() { 
computeImg.call($this); 
img.onload = function() { }; 
}; }; 
//图片缩放处理,以及图片显示函数 
var computeImg = function() { 
var m = this.height - setting.height; 
var n = this.width - setting.width; 
if (m > n) 
this.height = this.height > setting.height ? setting.height : this.height; 
else 
this.width = this.width > setting.width ? setting.width : this.width; 
$(this).next(".loading").remove(); 
$(this).show(); 
}; 
//循环调用预加载函数 
return $(images).each(function() { 
perLoading(this); 
}); 
} 
return yQuery; 
})(); 
window.yQuery = window.$$ = yQuery(); 
})();

调用代码如下：

$(document).ready(function() 
{ 
$$.imgResize({ imgId: ".viewArea img", height:160, width:270, loading: "https://3water.com/images/2012/155618/2012062710243954.gif" }); 
});

最后附上简单的源码： jsDemo_3water.rar