首页 > web前端 > css教程 > 为什么我的 onerror 图像替换代码在 Chrome 和 Mozilla 中失败?

为什么我的 onerror 图像替换代码在 Chrome 和 Mozilla 中失败?

Linda Hamilton
发布: 2024-11-03 16:20:30
原创
393 人浏览过

Why does my onerror image replacement code fail in Chrome and Mozilla?

对图像使用 onerror 属性

onerror 属性指定当图像无法加载时要采取的操作。在本例中,您提供了代码来修改 src 属性,并将有问题的图像替换为默认图像。

但是,您遇到了以下问题:此代码无法在 Chrome 和 Mozilla 中运行,尽管可以在 IE 中运行。

答案在于,如果 onerror 处理程序中提供的备份 URL 也无效,现代浏览器会多次触发错误事件。这会导致无限循环,因为事件被重复触发并且 src 属性不断被修改。

要解决此问题,您可以按如下方式修改代码:

<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">
登录后复制

通过设置 this.onerror=null 可以防止再次触发错误事件。这反过来又确保了图像不会被无休止地替换。

您还可以参考 http://jsfiddle.net/oLqfxjoz/ 的现场演示来可视化实现。

以上是为什么我的 onerror 图像替换代码在 Chrome 和 Mozilla 中失败?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板