[070520] 自用 Javascript 缩图函数 (onDOMLoaded)……

[更新日志]

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

演示http://Demo.QuChao.com/Resize/
下载http://www.box.net/shared/semf3lqy2h

补充
回应某朋友在 IM 上的疑惑……
JS 的缩图是和服务器端语言不同滴……
有锯齿(或者叫“失真”?)是正常滴……
而且把“能耗”转交给客户端是“不负责任”滴……

所以尽量不要在所谓的“杀猫帖”中使用…… 因为 JS 去遍历这些图片元素需要时间…… 而且“缩略”的动作直到所有图片读取完成才会生效…… 完全就没有效果了嘛……

标签: none

已有 14 条评论

  1. Chao QU Chao QU

    to maohanben:
    其实吧……
    只要对着代码改改就能缩 height 了……
    关键是你的要求是不是即可缩 width 又可以缩 height ……

  2. maohanben maohanben

    是不是可以改一下成长宽都能缩呢

  3. Kevin Kevin

    来学习的路过~

  4. Chao QU Chao QU

    直接用 CSS 限制大小当然可以……
    当图像小于那个大小就会被拉伸……
    当然我们也可以用 css 的 expression 特性来解决……
    但是 expression 的资源耗费的确比较大……

    何况我的初衷是对某一个区块的所有图进行缩略……
    并不用单独添加 resize 属性……
    比如对 BLOG 的正文部分的图进行缩略判断……
    而其它区块的图忽略……
    所以当初才选择了遍历所有元素而没有选择 images 数组……

    函数写出来本来也是给大家提供一种可能性……
    毕竟方法不止一种嘛……

  5. norman norman

    扼,我还有一事不明白...如果需要加resize=true的话,而且仅仅是用于RESIZE的话那么为什么不直接加个class 直接用CSS限制其大小,或者直接在服务器端出图时生成WIDTH.

    当然如果需要扩充其它的客户端图片功能的话另当别论.

  6. Hoofei Hoofei

    多谢大叔的辛勤劳动...哈哈...

    再多谢大叔给偶写了个专用的... :-)

  7. Chao QU Chao QU

    Dean's follow-up:
    http://dean.edwards.name/weblog/2006/06/again/
    仅为了缩图做这样的处理太浪费了……
    所以过两天将我部落格的 js 优化下咯……

  8. norman norman

    扼,这里有篇文章...

    http://dean.edwards.name/weblog/2005/02/order-of-events/
    (认真看comments)

    可能需要做一些crossbrowser的处理才好,

  9. Chao QU Chao QU

    ………………
    惭愧……
    正是在下……

  10. phpangel phpangel

    这篇文章原来讲的是你啊!

  11. Chao QU Chao QU

    改进版本(姑且称为 v1.1)已经写完……
    采纳 norman 君的意见和建议……
    只遍历 images 数组……
    在大尺寸页面下效率提升明显……
    另外对 IE 进行了优化……
    在图档未加载之前对其进行缩小显示……
    以上……

    晚上更新……

  12. Chao QU Chao QU

    感谢 norman……
    让俺了解自己的代码效率是多么低下……
    -_-
    但是 Firefox 并不支持 onreadystatechange 事件……
    我想还是加以判断处理为好……
    代码改进中……

  13. norman norman

    遍历的话使用
    for 在"杀猫贴"中会导致IE假死,解决的办法是使用 setTimeout来做,
    但是setTimeout最小值只能为10,速度太慢.

    而对于image完全可以使用document.images来定位,而不必遍历所有的ELEMENT,速度会快很多.

    如果使用

    for (var i = 0 ; i
    放在文档的最后去做的话,速度会快很多,而且不需要window.onload
    图片也可以在第一时间设置为指定大小.
    但该方法不能很好够unobtrusively的形式对功能进行封装,因为无法确定最后使用者也能够正确的将Script放在document的最后,而且不够灵活.

    要解决这个问题,就必须使用到document.onreadystatechange
    当页面LAYOUT完成而图片未加载是,就开始执行JS代码
    document.onreadystatechange = function(){
    if (document.readyState == "interactive"){
    alert(document.images[document.images.length -1].readyState);
    }

  14. ato ato

    这个挺好的,我收藏了

添加新评论