显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到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>
分享到:
相关推荐
在JavaScript中处理img元素加载图片时,onerror事件是一个非常重要的错误处理机制,它在图片加载失败时触发。然而,如果不正确地使用onerror事件处理器,可能会导致程序行为不正确,甚至出现栈溢出(Stack overflow...
在这个例子中,`img1`是主图片,如果加载失败,`onerror`事件会让它隐藏,并显示`img2`。确保`img2`的源是可靠的,或者是一个备用的占位符图片,以防万一`img1`的替换策略也失败。 这种方法的一个关键点是,确保`on...
然而,当图片无法加载或找不到时,浏览器会触发 `onerror` 事件。这个事件允许开发者定义当图片加载失败时执行的备用操作。在本文中,我们将深入探讨 `onerror` 事件,以及如何处理图片未找到导致的 "Stack overflow...
在本文中,将详细讲解如何使用JavaScript中的onerror事件为img标签设置默认图像,以解决图片加载失败的问题。通过编写相应的JS函数,可以确保在图片加载失败时,自动显示一张预设的默认图片,从而避免用户面对空白或...
3. 在 img 元素上添加 onerror 事件,并在事件处理函数中设置默认图片的 URL。 下面是示例代码: ``` <div id="container"></div> window.onload=function(){ var container = document.getElementById(...
1. **Window.onerror事件** `Window.onerror`事件是全局的,它会在整个页面上捕获任何未被捕获的JavaScript错误。当在JavaScript代码中出现语法错误、引用错误或其他类型的运行时错误时,浏览器会尝试在`window`...
为了改善这一情况,可以通过JavaScript的onerror事件处理机制来设置当图片加载失败时显示一个默认的图像,从而提高网页的整体体验。 在HTML中,<img>标签用于嵌入图片。一个典型的<img>标签包括宽度、高度和图片源...
当图片无法加载时,即发生404错误时,onerror事件会被触发,然后执行定义在onerror属性中的JavaScript代码。通常在onerror事件中,将出错的图片地址更换为一个默认的图片地址,这样用户界面不会显示错误信息,用户...
### 使用image对象的onerror事件 可以通过`onerror`事件来判断图片是否存在。具体做法是将图片的`src`属性设置为需要检测的图片地址,然后通过`onerror`事件来处理图片加载失败的情况。如果图片加载失败,`onerror`...
这个技术可以通过HTML的`<img>`标签和`onerror`事件属性来实现。 首先,我们来看`<img>`标签的基本结构: ```html <img src="image-url" alt="替代文本"> ``` 这里的`src`属性定义了图片的URL,而`alt`属性提供了...
- 不同浏览器对于`<img>`标签和`onerror`事件的支持程度不同,因此在开发时需要考虑浏览器兼容性问题。 - 可以使用工具库如Modernizr来检测浏览器特性,并采取相应的兼容方案。 2. **性能优化**: - 对于大型...
对于前端开发者来说,可以使用`img.onerror`事件处理错误,并给出友好的提示信息,或者采用预加载策略,确保关键图片在用户看到页面之前就已经加载完毕。 总结来说,这个博客文章和相关文件可能讨论了在Web开发中...
如果过滤规则未考虑大小写,攻击者可以将敏感关键字如`onerror`或`script`改写为大写或小写,如`<ScRiPt>alert(1)</ScRiPt>`,或者`<img src=1 ONeRror=alert(1)>`,以此来规避过滤。 3. 进制代替: 在JSON等数据...
4. onerror事件:除了onload事件外,Image对象还有一个onerror事件,该事件会在图片无法加载时触发。这对于处理图片加载错误情况非常有用。 5. 异步加载图片:在处理大量图片或者需要高效加载的页面时,开发者常常...
同时,我们还需要处理可能出现的错误情况,如图片加载失败,这时可以使用`onerror`事件。 ```javascript // 创建一个新的Image对象 var img = new Image(); // 设置图片源 img.src = 'your-image-url.jpg'; // ...
当从网络加载图片失败时,我们可以使用 img 标签的 onerror 属性来显示默认图片。onerror 属性可以指定当图片加载失败时执行的 JavaScript 代码。在这里,我们可以将默认图片的 URL 赋值给 img 标签的 src 属性,...
1. **onerror事件处理函数**:这是JavaScript最早的错误处理机制之一,当在页面上发生错误时,会在`window`对象上触发`error`事件。例如,我们可以在`<script>`标签内设置`onerror`回调函数,以弹出错误提示。为了...
此外,`img.onerror`事件可以用来处理图片加载失败的情况,确保程序在遇到问题时能够优雅地处理: ```javascript img.onerror = function() { console.error('图片加载失败'); }; ``` 综上所述,通过理解和利用...
4. 如果需要处理加载失败的情况,还可以添加`onerror`事件监听器。 下面是一个在IE9中使用JavaScript获取图片尺寸的示例代码: ```html <!DOCTYPE html> <title>IE9获取图片尺寸示例 function ...
- `onLoadSuccess/onCropSuccess/onError`: 监听图片加载成功、裁剪成功和错误的回调函数。 4. **实例方法** - `crop()`: 执行裁剪操作,裁剪后的结果可以通过`onCropSuccess`事件获取。 - `rotateLeft/...