推荐自用 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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jQuery的ready方法详解
Nov 27 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
js实现百度搜索提示框
Feb 05 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
JavaScript实现筛选数组
Mar 02 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
js三种排序算法分享
2012/08/16 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
详细分析vue响应式原理
2020/06/22 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
即兴演讲稿
2014/01/04 职场文书
自我鉴定写作要点
2014/01/17 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
学生安全承诺书
2014/05/22 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
话题作文之诚信
2019/11/28 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang