推荐自用 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 Uploadify上传带进度条的简单实例
Feb 12 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
Sort()函数的多种用法
Mar 20 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
js实现九宫格抽奖
Mar 19 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
PHP的explode和implode的使用说明
2011/07/17 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php中smarty区域循环的方法
2015/06/11 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
php实现的顺序线性表示例
2019/05/04 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
javascript完美拖拽的实现方法
2013/09/29 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
基于Python的接口测试框架实例
2016/11/04 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python中如何使用insert函数
2020/01/09 Python
PyQt5实现登录页面
2020/05/30 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
篮球赛口号
2014/06/18 职场文书
2015年电教工作总结
2015/05/26 职场文书
学籍证明模板
2015/06/18 职场文书
工作感想范文
2015/08/07 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
golang内置函数len的小技巧
2021/07/25 Golang
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫