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 相关文章推荐
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
详解Vue router路由
Nov 20 Vue.js
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
mysq GBKl乱码
2006/11/28 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php Undefined index的问题
2009/06/01 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php5.3 废弃函数小结
2010/05/16 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
javascript document.referrer 用法
2009/04/30 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
python编程羊车门问题代码示例
2017/10/25 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python实现K最近邻算法
2018/01/29 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
庆祝三八妇女节标语
2014/10/09 职场文书