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


Posted in Javascript onJune 28, 2012

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
Javascript 相关文章推荐
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
Fixie.js 自动填充内容的插件
Jun 28 #Javascript
Javascript的各种节点操作实例演示代码
Jun 27 #Javascript
妙用Jquery的val()方法
Jun 27 #Javascript
jQuery.extend 函数的详细用法
Jun 27 #Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
什么是JavaScript
2009/08/13 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python 实现一个简单的web服务器
2021/01/03 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
const和static readonly区别
2013/05/20 面试题
2014组织生活会方案
2014/05/19 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
社团招新宣传语
2015/07/13 职场文书
初中团委工作总结
2015/08/13 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书