推荐自用 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
本地下载

时间: 2024-10-08 01:37:03

推荐自用 Javascript 缩图函数 (onDOMLoaded)……_图象特效的相关文章

Javascript的匿名函数讲解_经验交流

一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: 复制代码 代码如下: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): 复制代码 代码如下: var fnMethodName = function(x){alert(x);} Function()构造函数: 复制代码 代码如下: var fnMethodName = new Function('x','al

jquery下组织javascript代码(js函数化)_基础知识

从神奇的"$"函数开始 "$"函数将在文档加载完成之后为一个指定的button 绑定事件,这些代码在单个网页中工作正常.但是如果我们还有其它的网页,我们将不得不重复这个过程. 复制代码 代码如下: <a href="javascript:;" id="sayHello">Say Hello</a> <script type="text/javascript"> //whe

JavaScript国旗变换效果代码_图象特效

1.页面的HTML代码如下: <img id="flag" src="Flags/cn_flag[1].gif" alt="" />  <select name="Country" accesskey="c" id="Country" onchange="change_flag(this);" runat="server" o&g

JavaScript 正则表达式验证函数代码_正则表达式

利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = new RegExp("^[\u03

javascript 图片轮换显示效果代码_图象特效

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

一个简单的javascript图片放大效果代码_图象特效

一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域 4.opacity:float,放大时图片被遮罩的区域的透明度 效果1: 调用的js代码: 复制代码 代码如下: $E({berviary:"currentPic&

非常不错的javascript 图片慢慢下层效果_图象特效

推荐一个不错的图片浏览效果_图象特效

HideDesign by saxon T O O L S ↑ ↓ ← sjx.saxon@gmail.com → Display 本地浏览IE下有效 URL图片地址浏览

javascript 图片滑动切换代码_图象特效

1 2 Next Back