日期:2014-05-16  浏览次数:20375 次

JavaScript Img onload 在 IE 7 失效的解决办法.

转自:

http://blog.mmclub.net/index/view/article_id/36

?

网站改版的时候碰到一个问题, 那就是 JavaScript 对页面内的图片处理的时候, 在IE 7 下居然失效了. 测试表明 IE6, FF 都没有问题, 唯独 IE7 对img的 onload 事件不理会. 折腾了半天. 发现原来是 IE 缓存引起的毛病.

??? 比如通常我们对页面的图像重新格式化显示的时候(为什么格式化显示? 很明显后台编辑和前台显示不是同样的尺寸的时候, 图像会影响页面的布局.) 这样做就可以了.
  1. <script?type= "text/javascript" > ?
  2. ???? var ?imgs?=?doucument.getElementsByTagName( "img" ); ?
  3. ???? for ( var ?i?=?0;?i?<?imgs.length;?i++)?{ ?
  4. ???????? var ?newImg?=? new ?Image(); ?
  5. ????????newImg.src?=?imgs[i].src; ?
  6. ????????newImg.onload?=? function (){ ?
  7. ??????????? //?处理图像显示各项属性.比如最简单宽度不能大于500px ?
  8. ??????????? if (newImg.width?>?500)?{ ?
  9. ???????????????imgs[i].style.width?=?500?+? 'px' ; ?
  10. ???????????} ?
  11. ??????????? //?其他的处理.... ?
  12. ???????} ?
  13. ????} ?
  14. </script>?
??? 通常这样是可以处理了. 但是IE在页面重复刷新的时候, 读取的是缓存里的图片. 速度非常快. 这样的话不知道为什么它就忽略了 onload 事件了. 比较恶心. 处理办法是先告诉浏览器图片载入后要干啥, 然后再去载入图像. 这样就能让IE继续响应图像的 onload 事件了. 像下面的代码:
  1. <script?type= "text/javascript" > ?
  2. ?? var ?imgs?=?document.getElementsByTagName( "img" ); ?
  3. ?? for ( var ?i=0;?i<imgs.length;?i++)?{ ?
  4. ???? var ?newImg?=? new ?Image(); ?
  5. ????newImg.onload?=? function ()?{ ?
  6. ?????? //?这里使用处理图像载入后的CODE ?
  7. ????} ?
  8. ????newImg.src?=?imgs[i].src; ?
  9. ??} ?
  10. </script>?
??? 这样就可以啦. 本站这次被这个小毛病阴了一次. 很生气.