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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
js读取注册表的键值示例
Sep 25 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
浅谈React高阶组件
Mar 28 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
使用Ajax实现进度条的绘制
Apr 07 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
YII路径的用法总结
2014/07/09 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
基于postman获取动态数据过程详解
2020/09/08 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python中的元组介绍
2019/01/28 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
文明演讲稿范文
2014/05/12 职场文书
12岁生日演讲稿
2014/05/14 职场文书
营销总监岗位职责
2014/09/16 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL