推荐自用 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 相关文章推荐
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
jQuery事件详解
Feb 23 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
mysql+php分页类(已测)
2008/03/31 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php获取远程文件大小
2015/10/20 PHP
php生成图片验证码的方法
2016/04/15 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
python微信好友数据分析详解
2018/11/19 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python 实现try重新执行
2019/12/21 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
消防安全管理制度
2014/02/01 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
检讨书范文大全
2015/05/07 职场文书
中国合伙人观后感
2015/06/02 职场文书
2015年中秋节主持词
2015/07/30 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers