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


Posted in Javascript onOctober 23, 2007

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 ……
https://3water.com/test/resizeIMGs_1.2/index.html
本地下载

Javascript 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
React四级菜单的实现
Apr 08 Javascript
非常漂亮的JS代码经典广告
Oct 21 #Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 #Javascript
javascript[js]获取url参数的代码
Oct 17 #Javascript
javascript中的有名函数和无名函数
Oct 17 #Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 #Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 #Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python连接字符串的方法小结
2015/07/13 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python pygame实现五子棋小游戏
2020/10/26 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Python学习之time模块的基本使用
2021/01/17 Python
Python扫描端口的实现
2021/01/25 Python
2014年社区植树节活动方案
2014/02/28 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android