推荐自用 Javascript 缩图函数 (onDOMLoaded)……

时间:2021-05-18

070520:Norman君给出了DeanEdwards等关于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://www.jb51.net/test/resizeIMGs_1.2/index.html
本地下载

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章