推荐自用 Javascript 缩图函数 (onDOMLoaded)……

070520：Norman 君给出了 Dean Edwards 等关于 onDOMLoaded 事件的跨浏览器解决方案……
其实 onDOMLoaded 是 DOM 被载入（图片尚未载入）状态下的一个“不存在的”事件……
由于不同浏览器的支持度不同……
所以需要进行 Hack ……
所幸 Dean 和其他一些朋友反复研究后给出了解决方案……
在此表示感谢……
对于缩图函式本身的改进就是合并了上个版本的两个不同模式（快速和平缓）……
所谓快速模式是用了 while 循环……
速度快但是容易造成假死……
所谓平缓模式则用 setInterval 函式来解决上述问题……
可惜 setInterval 有最短周期限制……
所以速度比较慢……
从快速到平缓模式的切换临界值我设置为 500 ……
也即当一个页面的图片达到 500 时便启用平缓模式来缩图……
大伙儿可以根据自己需求更改……
具体请看 resizeImgs 函式的第二行……

070516：感谢 Norman 君在提升代码性能上的建议……
将遍历所有元素更改为遍历图像数组……
至于 Norman 所提议的在图像读取之前即进行缩图的功能……
未能实现……
一来是因为 Firefox 并不支持 onreadystatechange 事件（只有 onload ？）……
二来则在测试中发现 IE 下在 interactive 状态下调整图像大小也需要刷新以后才能执行……
也就是说都得等到页面加载完毕（或者加载一次）后才能进行操作……
恕鄙人才疏学浅……
如有解决方案望留言教授……

原理呢……
就是遍历图像数组……
如果定义了 resize 属性就进行缩图……
当 resize 的值为数字（而且小于原图宽度）就缩小到该数字宽度……
当 resize 为其它值则缩小到预设宽度……
至于为什么要清除 height 属性……
答曰：为了保持宽、高之比……
以上……

由于代码过长……
暂不贴出……
使用方法请参看 Demo ……
http://www.jb51.net/test/resizeIMGs_1.2/index.html
本地下载

赞 (0)

相关推荐

  • 推荐自用 Javascript 缩图函数 (onDOMLoaded)……

    070520:Norman 君给出了 Dean Edwards 等关于 onDOMLoaded 事件的跨浏览器解决方案-- 其实 onDOMLoaded 是 DOM 被载入(图片尚未载入)状态下的一个"不存在的"事件-- 由于不同浏览器的支持度不同-- 所以需要进行 Hack -- 所幸 Dean 和其他一些朋友反复研究后给出了解决方案-- 在此表示感谢-- 对于缩图函式本身的改进就是合并了上个版本的两个不同模式(快速和平缓)-- 所谓快速模式是用了 while 循环-- 速度快但是容

  • 谈谈JavaScript中的函数与闭包

    谈谈JavaScript中的函数与闭包

    闭包这东西,说难也难,说不难也不难,下面我就以自己的理解来说一下闭包 一.闭包的解释说明 对于函数式语言来说,函数可以保存内部的数据状态.对于像C#这种编译型命令式语言来说,由于代码总是在代码段中执行,而代码段是只读的,因此函数中的数据只能是静态数据.函数内部的局部变量存放在栈上,在函数执行结束以后,所占用的栈被释放,因此局部变量是不能保存的. Javascript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在定义函数时确定的.因此Javascript中函数对象不仅保存代码逻辑,还必

  • 简单分析javascript中的函数

    简单分析javascript中的函数

    在脚本语言JavaScript中,函数的定义是由事件驱动或者当它被调用时可重复使用的代码块.在JavaScript的标准ECMAscript中,把函数表述为可以随时随地运行的语句.我个人是不认同ECMA的说法的,因为函数只有在发生调用的时候才会执行,否则就是一段毫无生气的代码. 我们来具体认识认识函数. (一)首先是函数的定义: 在ECMAscript函数的定义是 关键字function 函数名( 参数){主体:return(返回值)};这四部分组成的,但是在脚本语言中函数的定义却分为三种方式定

  • ThinkPHP3.0略缩图不能保存到子目录的解决方法

    解决办法一(ThinkPHP官方提供的办法,我并没有测试过):升级到ThinkPHP3.1最新的UploadFile.class.php(https://github.com/liu21st/extend/tree/master/Extend/Library/ORG/Net),下载后替换原来的UploadFile.class.php 解决办法二:修改UploadFile.class.php的部分代码 这是自己做的解决办法,增加一个略缩图的子目录生成函数步骤1>> UploadFile.clas

  • 告诉你什么是javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.Function对象包含一个字符串,字符串包含函数的javascript代码.假如你是从C语言或者java语言转过来的,这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说,这很平常.数据和代码之间的区别是很模糊的. //可以这样创建函数 var fn = new Functio

  • JavaScript使用setInterval()函数实现简单轮询操作的方法

    JavaScript使用setInterval()函数实现简单轮询操作的方法

    本文实例讲述了JavaScript使用setInterval()函数实现简单轮询操作的方法.分享给大家供大家参考.具体分析如下: 轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称"程控输出入"(Programmed I/O).轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始.轮询法实作容易,但效率偏低. 在JavaScript使用setInterval函数作简单的轮询操作,可以随时

  • JavaScript常用数学函数用法示例

    本文实例讲述了JavaScript常用数学函数用法.分享给大家供大家参考,具体如下: 一.代码 <script language="javascript"> <!-- document.write("欧拉常数e的值为(e属性):"+Math.E+"<br>"); document.write("2的自然对数为(LN2属性):"+Math.LN2+"<br>");//

  • JavaScript常用工具函数大全

    本文实例总结了JavaScript常用工具函数.分享给大家供大家参考,具体如下: 为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) {. []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; }; 为元素添加trigger方

  • 深入浅析javascript立即执行函数

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花; 当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.  JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript

  • javaScript中push函数用法实例分析

    本文实例讲述了javaScript中push函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 push 方法,将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1   [item2   [.   .   .   [itemN   ]]]]) 参数 arrayObj,必选项.一个   Array   对象. item,   item2,.   .   .   itemN, 可选项.该   Array   的新元素. 说明 push 

随机推荐