手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >推荐自用 Javascript 缩图函数 (onDOMLoaded)……
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
摘要:070520:Norman君给出了DeanEdwards等关于onDOMLoaded事件的跨浏览器解决方案……其实onDOMLoaded是D...

070520:Norman君给出了DeanEdwards等关于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

本地下载

【推荐自用 Javascript 缩图函数 (onDOMLoaded)……】相关文章:

网页常用Javascript

javascript实现树形菜单的方法

JavaScript实现列表分页功能特效

javascript元素动态创建实现方法

JavaScript function函数种类详解

JavaScript中反正弦函数Math.asin()的使用简介

理解javascript封装

javascript用函数实现对象的方法

JavaScript中关联原型链属性特性

简单介绍JavaScript的变量和数据类型

精品推荐
分类导航