推荐自用 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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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面向对象分析设计的经验原则
2008/09/20 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php内嵌函数用法实例
2015/03/20 PHP
php-msf源码详解
2017/12/25 PHP
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python实现快递价格查询系统
2020/03/03 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
个人廉洁自律承诺书
2014/03/27 职场文书
股票投资建议书
2014/05/19 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
教师师德表现自我评价
2015/03/05 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS