推荐自用 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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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调用三种数据库的方法(1)
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
2011/07/26 Javascript
js获取url传值的方法
2015/12/18 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python实现文件的备份流程详解
2019/06/18 Python
Python中bisect的使用方法
2019/12/31 Python
pytorch forward两个参数实例
2020/01/17 Python
Python 必须了解的5种高级特征
2020/09/10 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
关于安全的广播稿
2014/10/23 职场文书
导游词300字
2015/02/13 职场文书
故意伤害辩护词
2015/05/21 职场文书
植物园观后感
2015/06/11 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server