`
hudeyong926
  • 浏览: 2033345 次
  • 来自: 武汉
社区版块
存档分类
最新评论

注意img图片的onerror事件.

阅读更多

经过分析,发现网页中存在类似如下的代码:

<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>
<img src=”../../../sys/common/image/fileoperation/icon/${file.suffix }.gif” onerror=”nofind();” />${file.name }</td>
 
分享到:
评论

相关推荐

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

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

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

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

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

    同时,为了防止默认图片再次触发onerror事件,需要将img元素的onerror属性置为null,从而避免无限循环的问题。 下面提供一个具体的实现示例: ```javascript function errorImg(img) { img.src = "***"; // 这里...

    JavaScript中的onerror事件概述及使用

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

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

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

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

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

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

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

    JQ 获取图片真实宽高

    $('img').on('load error', function() { // 这里确保无论图片是否加载成功,都会执行 var imgWidth = $(this).width(); var imgHeight = $(this).height(); console.log('Image size:', { width: imgWidth, ...

    ie判断图片加载成功代码

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

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

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

    js解决div内图片自适应大小

    在某些情况下,可能需要添加一个`onerror`事件处理器,以处理图片加载失败的情况。 总的来说,通过JavaScript和适当的CSS,我们可以实现img图片在大小未知的div中自适应显示,并兼容多种浏览器,包括老版本的IE。...

    基于FileReader多图片上传特效源码.zip

    3. **事件处理**:FileReader提供了`onload`、`onerror`和`onprogress`等事件,用于处理读取完成、错误或进度更新的情况。例如,`onload`事件通常用于在文件读取成功后执行代码,如显示预览图片。 4. **数据URL**:...

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

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

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

    总结来说,要在IE9浏览器中获取图片尺寸,需要创建`Image`对象、预加载图片、监听`onload`事件,并根据需要处理`onerror`事件。同时,还要注意兼容性和性能优化。在实际项目中,可以结合具体需求选择最适合的实现...

    html 上传图片,实现拖拽文件上传,上传后页面显示图片信息,可以点击图片放大

    reader.onerror = function (error) { console.error('读取文件失败:', error); }; } ``` `showImageInModal`函数可以创建一个模态窗口,显示大图。这里我们假设有一个模态元素存在,只需设置其`innerHTML`为...

    javascript 获取图像信息

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

    高度,javascript判断上传图片大小,宽度,高度

    同时,还要注意处理可能的错误,例如`onerror`事件。 6. **代码示例**: ```javascript const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', (event) =&gt; { const ...

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

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

    Mobile H5 图片上传预览

    2. `readAsDataURL(file)`:这个方法用于读取文件,参数`file`是File对象,读取完成后,会触发`onload`或`onerror`事件。 3. `result`属性:当读取成功后,`result`属性会包含读取到的数据,通常是Data URL。 三、...

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

    1. 在`&lt;img&gt;`标签的`src`属性中绑定图片地址,并监听`onerror`事件。当图片加载失败时,会自动触发该事件。 2. 在Vue的`methods`对象中定义一个名为`imgError`的方法。在这个方法里,根据传入的参数(通常是绑定在`...

Global site tag (gtag.js) - Google Analytics