`

IMG的onerror事件

 
阅读更多
显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的.

< img src="http://www.ooxue.com/upload/movie/2007.gif" onerror="this.src='http://www.ooxue.com/upload/error.gif'">

如果服务器里存在2007.gif 则显示它,如果不存在,就会显示error.gif。



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
此功能在项目中使用确实很不错,但是在使用中却发现了意想不到的问题。

  当网络原因或者是其他的原因,导致onerror里面提供的图片地址加载不到的时候,ie会循环执行onerror事件,导致栈溢出,此时页面会弹出了alert消息框,错误信息为:"stack overflow at line:0"。

IE 6.0一般会以弹出的消息框报道溢出现象,并且会继续执行它的功能。但是也有一些溢出漏洞发生时,会关闭所有打开的窗口而没有任何提示。 因此选择使用该事件的时候还是要慎重啊!


解决办法:

经过分析,发现网页中存在类似如下的代码:
<img src=”pic.gif” onerror=”javascript:this.src=’/noPic.gif’;” alt=”pic” />

分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif,图片不存在将显示 noPic.gif。但问题来了,如果 noPic.gif 也不存在,则继续触发 onerror,导致循环,故出现错误。

说明:如果图片存在,但网络很不通畅,也可能触发 onerror。

解决方法:

第一种:去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且存在。

第二种:

<script type=”text/javascript”> <!– function nofind(){ var img=event.srcElement; img.src=”../../../sys/common/image/fileoperation/icon/default.gif”; img.onerror=null;控制不要一直跳动 } //–> </script> <td align=”center”><img src=”../../../sys/common/image/fileoperation/icon/${file.suffix }.gif” onerror=”nofind();” />${file.name }</td>
分享到:
评论

相关推荐

    js注意img图片的onerror事件的分析

    在JavaScript中处理img元素加载图片时,onerror事件是一个非常重要的错误处理机制,它在图片加载失败时触发。然而,如果不正确地使用onerror事件处理器,可能会导致程序行为不正确,甚至出现栈溢出(Stack overflow...

    img标签中onerror用法

    在这个例子中,`img1`是主图片,如果加载失败,`onerror`事件会让它隐藏,并显示`img2`。确保`img2`的源是可靠的,或者是一个备用的占位符图片,以防万一`img1`的替换策略也失败。 这种方法的一个关键点是,确保`on...

    解析img图片没找到onerror事件 Stack overflow at line: 0

    然而,当图片无法加载或找不到时,浏览器会触发 `onerror` 事件。这个事件允许开发者定义当图片加载失败时执行的备用操作。在本文中,我们将深入探讨 `onerror` 事件,以及如何处理图片未找到导致的 "Stack overflow...

    JS对img标签进行优化使用onerror显示默认图像

    在本文中,将详细讲解如何使用JavaScript中的onerror事件为img标签设置默认图像,以解决图片加载失败的问题。通过编写相应的JS函数,可以确保在图片加载失败时,自动显示一张预设的默认图片,从而避免用户面对空白或...

    利用图片的 onerror 事件载入默认图片

    3. 在 img 元素上添加 onerror 事件,并在事件处理函数中设置默认图片的 URL。 下面是示例代码: ``` &lt;div id="container"&gt;&lt;/div&gt; window.onload=function(){ var container = document.getElementById(...

    JavaScript中的onerror事件概述及使用

    1. **Window.onerror事件** `Window.onerror`事件是全局的,它会在整个页面上捕获任何未被捕获的JavaScript错误。当在JavaScript代码中出现语法错误、引用错误或其他类型的运行时错误时,浏览器会尝试在`window`...

    JavaScript通过使用onerror设置默认图像显示代替alt

    为了改善这一情况,可以通过JavaScript的onerror事件处理机制来设置当图片加载失败时显示一个默认的图像,从而提高网页的整体体验。 在HTML中,&lt;img&gt;标签用于嵌入图片。一个典型的&lt;img&gt;标签包括宽度、高度和图片源...

    微信小程序 image组件binderror使用例子与js中的onerror区别

    当图片无法加载时,即发生404错误时,onerror事件会被触发,然后执行定义在onerror属性中的JavaScript代码。通常在onerror事件中,将出错的图片地址更换为一个默认的图片地址,这样用户界面不会显示错误信息,用户...

    用Javascript判断图片是否存在,不存在则显示默认图片的代码

    ### 使用image对象的onerror事件 可以通过`onerror`事件来判断图片是否存在。具体做法是将图片的`src`属性设置为需要检测的图片地址,然后通过`onerror`事件来处理图片加载失败的情况。如果图片加载失败,`onerror`...

    HTML 图片不存在则显示一个默认图片

    这个技术可以通过HTML的`&lt;img&gt;`标签和`onerror`事件属性来实现。 首先,我们来看`&lt;img&gt;`标签的基本结构: ```html &lt;img src="image-url" alt="替代文本"&gt; ``` 这里的`src`属性定义了图片的URL,而`alt`属性提供了...

    image出错使用的属性

    - 不同浏览器对于`&lt;img&gt;`标签和`onerror`事件的支持程度不同,因此在开发时需要考虑浏览器兼容性问题。 - 可以使用工具库如Modernizr来检测浏览器特性,并采取相应的兼容方案。 2. **性能优化**: - 对于大型...

    img.readyState!= complete 权限问题 也是一个无用题

    对于前端开发者来说,可以使用`img.onerror`事件处理错误,并给出友好的提示信息,或者采用预加载策略,确保关键图片在用户看到页面之前就已经加载完毕。 总结来说,这个博客文章和相关文件可能讨论了在Web开发中...

    记录几种XSS绕过方式1

    如果过滤规则未考虑大小写,攻击者可以将敏感关键字如`onerror`或`script`改写为大写或小写,如`&lt;ScRiPt&gt;alert(1)&lt;/ScRiPt&gt;`,或者`&lt;img src=1 ONeRror=alert(1)&gt;`,以此来规避过滤。 3. 进制代替: 在JSON等数据...

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

    4. onerror事件:除了onload事件外,Image对象还有一个onerror事件,该事件会在图片无法加载时触发。这对于处理图片加载错误情况非常有用。 5. 异步加载图片:在处理大量图片或者需要高效加载的页面时,开发者常常...

    js监听某张图片是否加载完成,完成后再执行相应代码

    同时,我们还需要处理可能出现的错误情况,如图片加载失败,这时可以使用`onerror`事件。 ```javascript // 创建一个新的Image对象 var img = new Image(); // 设置图片源 img.src = 'your-image-url.jpg'; // ...

    img 加载网络图片失败 显示默认图片的方法

    当从网络加载图片失败时,我们可以使用 img 标签的 onerror 属性来显示默认图片。onerror 属性可以指定当图片加载失败时执行的 JavaScript 代码。在这里,我们可以将默认图片的 URL 赋值给 img 标签的 src 属性,...

    JavaScript错误处理

    1. **onerror事件处理函数**:这是JavaScript最早的错误处理机制之一,当在页面上发生错误时,会在`window`对象上触发`error`事件。例如,我们可以在`&lt;script&gt;`标签内设置`onerror`回调函数,以弹出错误提示。为了...

    ie判断图片加载成功代码

    此外,`img.onerror`事件可以用来处理图片加载失败的情况,确保程序在遇到问题时能够优雅地处理: ```javascript img.onerror = function() { console.error('图片加载失败'); }; ``` 综上所述,通过理解和利用...

    IE9浏览器下 使用JS获取图片尺寸大小 的方法

    4. 如果需要处理加载失败的情况,还可以添加`onerror`事件监听器。 下面是一个在IE9中使用JavaScript获取图片尺寸的示例代码: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;IE9获取图片尺寸示例 function ...

    vueimgcropper基于Vue的移动端图片裁剪组件

    - `onLoadSuccess/onCropSuccess/onError`: 监听图片加载成功、裁剪成功和错误的回调函数。 4. **实例方法** - `crop()`: 执行裁剪操作,裁剪后的结果可以通过`onCropSuccess`事件获取。 - `rotateLeft/...

Global site tag (gtag.js) - Google Analytics