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: "http://www.jb51.net/images/2012/155618/2012062710243954.gif" }); }); 最后附上简单的源码: jsDemo_jb51.rar |