推荐自用 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 相关文章推荐
jquery、js操作checkbox全选反选
Mar 12 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
Node.js事件驱动
Jun 18 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
Vue结合路由配置递归实现菜单栏功能
Jun 16 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里的单例类写法实例
2015/06/25 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
查看大图功能代码jquery版
2013/11/05 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
详解javascript遍历方式
2015/11/11 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
9种方法优化jQuery代码详解
2020/02/04 jQuery
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Python动态加载模块的3种方法
2014/11/22 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
竞选演讲稿范文
2013/12/28 职场文书
学生安全教育材料
2014/02/14 职场文书
六年级学生评语
2014/04/22 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
结婚司仪主持词
2015/06/29 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server