推荐自用 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+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
详解vue的diff算法原理
2018/05/20 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python+mysql实现教务管理系统
2019/02/20 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
捐款倡议书范文
2014/02/02 职场文书
社区工作感言
2014/02/21 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
艾滋病宣传标语
2014/06/25 职场文书
党员志愿者活动方案
2014/08/28 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
故宫的导游词
2015/01/31 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android