推荐自用 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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
微信小程序实现留言板
Oct 31 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 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
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
python远程登录代码
2008/04/29 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
PyQt5实现简易电子词典
2019/06/25 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python3字符串操作总结
2019/07/24 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
党员学习群众路线心得体会
2014/11/04 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android