推荐自用 Javascript 缩图函数 (onDOMLoaded)……_Javascript教程-查字典教程网
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
发布时间:2016-12-30 来源:查字典编辑
摘要:070520:Norman君给出了DeanEdwards等关于onDOMLoaded事件的跨浏览器解决方案……其实onDOMLoaded是D...

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……

http://www.jb51.net/test/resizeIMGs_1.2/index.html

本地下载

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类