avaScript 学习笔记之一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://pic002.cnblogs.com/images/2012/155618/2012062710243954.gif" }); });
标签: 图片等比缩放及预加载, jquery