`

img onerror 使用注意

    博客分类:
  • js
阅读更多
<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。

 

 

<img src=”pic.gif” onerror=”javascript:this.onerror=null;this.src=’/noPic.gif’;” alt=”pic” />
分享到:
评论

相关推荐

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

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

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

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

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

    在传统HTML和JavaScript开发中,当图片加载失败时,可以使用img标签的onerror属性。当图片无法加载时,即发生404错误时,onerror事件会被触发,然后执行定义在onerror属性中的JavaScript代码。通常在onerror事件中,...

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

    2. 使用this.onerror=null语句来确保图片的onerror事件处理器只触发一次。当图片加载失败时,首先隐藏该图片元素,然后设置其src为默认图片的URL,并通过this.onerror=null立即取消后续的错误处理。 使用onerror...

    JavaScript中的onerror事件概述及使用

    请注意,`&lt;img&gt;`标签的`onerror`事件处理器没有额外的参数,只能通过修改`this`(即当前图片元素)的`src`属性来处理错误。 总结来说,`onerror`事件是JavaScript中不可或缺的错误处理机制,它允许开发者对脚本和...

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

    onerror 事件的浏览器兼容性是一个需要注意的问题。在 Firefox 中,上面的代码可以正常工作。但是在 IE7 中,却不起作用。 为了解决这个问题,我们可以使用以下代码: ``` &lt;img src="data:image/png;base64," alt=...

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

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

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

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

    ie判断图片加载成功代码

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

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

    img.onerror = function() { console.error('Failed to load image'); }; ``` 4. **实际应用**: 如果要在DOM中插入图片并获取尺寸,可以在图片加载完成后进行操作。例如: ```javascript document....

    javascript 获取图像信息

    在本例中,为`&lt;img&gt;`元素添加了`onreadystatechange`和`onerror`事件处理程序。 ```javascript img.attachEvent("onreadystatechange", orsc); img.attachEvent("onerror", oe); ``` #### 4. `document.body....

    PhoneGap,API帮助文档翻译整理9-Geolocation_(定位)

    navigator.geolocation.getCurrentPosition(onSuccess, onError); } // onSuccess 回调函数 // 接收包含当前 GPS 坐标的 Position 对象 function onSuccess(position) { var latlon = position.coords....

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

    通常情况下,非背景图片的加载状态可以通过img标签的onerror事件来判断,当图片加载失败时会触发该事件。但这种方法并不适用于检测CSS背景图片的加载状态。对于背景图片来说,需要一种不同的方法来进行判断。 在...

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

    需要注意的是,虽然IE浏览器支持`onerror`事件,但不同浏览器可能有不同的行为。为了实现更好的兼容性,可以使用`try...catch`语句来捕获错误,或者使用`setTimeout`进行延迟检测,因为某些浏览器可能不会立即触发`...

    IE11下使用canvas.toDataURL报SecurityError错误的解决方法

    xmlHTTP.onerror = reject; xmlHTTP.send(); } else { // 如果不是IE,可以直接使用toDataURL const img = new Image(); img.crossOrigin = "Anonymous"; img.onload = () =&gt; { const canvas = document....

    chrome下img加载对height()的影响示例探讨

    在Chrome浏览器下,`img` 元素的加载方式对使用JavaScript(如jQuery)的`height()`...因此,在实际开发中,考虑到性能和用户体验,通常建议在CSS中预设图片的宽高,或者使用`onerror`和`onload`事件来优化加载流程。

    Koa技术分享2.0.docx

    - **使用Koa-onerror**: `koa-onerror`中间件可以进一步增强错误处理能力,优化错误信息的输出格式。 ```javascript var onerror = require('koa-onerror'); onerror(app); ``` #### 四、Koa框架的应用场景 - ...

    H5实现调用手机摄像头相册。完美实现图片压缩、预览、删除的功能。---Demo

    img.onerror = reject; img.src = URL.createObjectURL(file); }); } ``` 最后,关于图片的删除,通常在前端是通过JavaScript操作DOM元素来实现的。例如,如果图片显示在一个`&lt;img&gt;`元素上,只需移除该元素即可...

    vue中当图片地址无效的时候,显示默认图片的方法

    在Vue中,实现这一功能的方法有很多,其中一种比较直接且常用的方式是使用`&lt;img&gt;`标签的`onerror`事件。 具体实现步骤如下: 1. 在`&lt;img&gt;`标签的`src`属性中绑定图片地址,并监听`onerror`事件。当图片加载失败时...

    [removed]()的用法与实例分析

    除了`window`对象,还有一些元素也支持`onerror`事件,例如`&lt;img&gt;`标签,全支持该事件。然而,`&lt;script&gt;`标签在IE9和更高版本以及Safari 5.1+、Chrome 13+支持`onerror`。`&lt;css&gt;`和`&lt;iframe&gt;`则不支持。 在处理跨域...

Global site tag (gtag.js) - Google Analytics