`
jickcai
  • 浏览: 246762 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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> 
    这样就可以啦. 本站这次被这个小毛病阴了一次. 很生气.
分享到:
评论

相关推荐

    js的image onload事件使用遇到的问题

    为了解决这个问题,需要在onload事件处理程序中重新指定img.src属性。这样做的目的是为了告诉浏览器要加载的是一个新的图片资源,以此绕过缓存,从而确保onload事件能够被触发。 以上就是从给定文件信息中提取的...

    IE浏览器中图片onload事件无效的解决方法

    本文主要讨论的是在IE浏览器中遇到的一个特定问题,即图片的`onload`事件在某些情况下无法正常触发,导致图片加载状态的控制出现问题。 首先,我们要理解`onload`事件的作用。`onload`是HTML DOM(文档对象模型)中...

    解决Android4.4 webview 图片如何自适应 之前的方法失效问题

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中加载和显示网页内容。然而,在不同的Android版本中,WebView的特性和行为可能存在差异,这可能导致开发者遇到一些意想不到的问题。在Android ...

    前端常用代码片段

    在开发过程中,可能会遇到某些图像源失效的情况。此时,可以通过简单的JavaScript代码来自动替换这些破坏的图像。 **实现方式:** 1. **使用`onerror`事件:**为每个`&lt;img&gt;`标签添加`onerror`事件监听器。 2. **...

    在IE流览器中正确显示PNG透明图片

    标题中的“在IE流览器中正确显示PNG透明图片”是指在Internet Explorer(IE)浏览器中解决PNG图像透明度无法正确显示的问题。PNG是一种支持透明度的图像格式,它允许图像具有半透明或完全透明的区域,使得图像可以...

    js使用小技巧

    无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) encodeURIComponent对":"、"/"、";" 和 "?"也编码 ...

    javascript批量检查当图片不存在时则显示默认图片的代码

    对于不支持该特性的旧版浏览器,可能需要使用其他技术,如使用JavaScript的`onreadystatechange`或`onload`事件来检测图片加载状态。 此外,如果你的应用或网站有大量图片,你还可以考虑使用懒加载(lazy loading)...

    js判断背景图片是否加载成功使用img的width实现

    在JavaScript中,我们经常需要处理图像的加载情况,特别是在页面设计和交互中。有时,我们需要确保背景图片已经完全加载成功才能进行下一步操作。虽然对于直接的`&lt;img&gt;`标签,我们可以利用`onload`和`onerror`事件来...

    网页打开后国图片显示几秒后自动消失

    3. **图片加载延迟**:如果图片加载速度较慢,可能在浏览器显示出来后,由于网络问题或者图片过大,未能完全加载就触发了某些事件(如onload)导致图片被移除。确认图片的大小和格式是否合适,优化图片以提高加载...

    js图片上传前预览功能(兼容所有浏览器)

    这是因为在IE7中,浏览器会自动去掉文件路径中的分割线,从而使得文件路径失效。对于这种情况,通常的解决方案是尝试其他方法获取文件数据,或者在上传时使用表单提交方式来绕过这一限制。 通过上述讲解,我们已经...

    网页中的图片的处理方法与代码

    &lt;img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width&gt;screen.width-350) this.width=screen.width-350"&gt; ``` 这段代码会确保图片宽度不超过屏幕宽度减去350像素。 3. **禁止IE6自动缩小大图**: ...

    实现图片预加载的三大方法及优缺点分析

    然而,对于不支持JavaScript的用户,这种方法可能会失效。 接下来是使用JavaScript进行图片预加载。通过创建新的`Image`对象,可以实现异步加载图片,不会阻塞页面的渲染。例如: ```javascript function preload...

    js兼容火狐获取图片宽和高的方法

    通过将该URL设置为img元素的src属性,我们就可以在img元素的onload事件中获取到正确的图片宽度和高度。 上述方法的关键点包括: 1. 使用window.URL.createObjectURL方法生成一个指向文件的URL。该方法接受一个Blob...

    JS实现图片预览的两种方式

    在JavaScript中实现图片预览功能主要分为两种方法。 第一种方法是利用window.URL.createObjectURL()函数。这个函数可以为输入的文件数据创建一个可访问的URL。这个URL可以被当做一个普通文件路径来对待,并且可以...

    JQ获取动态加载的图片大小的正确方法分享

    尽管`load()`事件通常用于监听元素的加载完成,但它在图片从浏览器缓存中加载时可能会失效,这时获取到的尺寸是不准确的。 为了正确获取动态加载图片的大小,我们需要使用JavaScript的`Image`类。以下是一种正确的...

    CSS设置未知大小图片在已知大小容器水平垂直居中

    总结来说,这个解决方案通过CSS实现了未知大小的图片在已知大小容器内的水平垂直居中,同时通过JavaScript进行图片尺寸的适配,确保图片不会溢出容器。这种方法兼容了不同浏览器,提供了良好的用户体验。

    基于jquery实现图片上传本地预览功能

    在这个过程中,`window.URL.createObjectURL(file)`生成一个临时的、基于Blob的URL,这个URL可以被设置为`&lt;img&gt;`标签的`src`属性,从而在页面上展示选定的图片。 为了使整个过程更加完整,我们可以封装成一个函数,...

Global site tag (gtag.js) - Google Analytics