2024年-元宵倒计时

9 天 9 时 9 分 9 秒


【技术分享】处理img标签加载图片失败,显示默认图片

目录

    常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。
    例如这样使用:

    <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

     

    当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。

    但是,注意哦,这里有个大坑哦,如果logoError.png 也不存在,则会继续触发 onerror,导致死循环,页面卡死。而且,就算图片存在,但网络很不通畅,也可能触发 onerror。

    当然,解决办法是有的,代码如下:

    <img src="images/logo.png" onerror="slnotimg();"/>
    <script type="text/javascript">
    function slnotimg() {
    var img = event.srcElement;
    img.src = "images/logoError.png";
    img.onerror = null; //解绑onerror事件
    }
    </script>
    
    

     




    版权声明

    1. 本网站名称: 安鹿轩

    2. 本站永久网址: www.anlu1314.com

    3. 本站提供的所有内容仅供学习、交流和分享用途,只供参考。

    4. 本站资源禁止并谢绝未经本站许可的使用,如欲转载,请署名以及注明出处。

    5. 本站(原创)文章、资源、图片等所有内容,一经转载,即表示您已经接受上述声明!需自行承担一切风险与责任!

    6. 关于本站的所有留言评论与转载、引用文纯属文字原作者个人观点,与本站观点及立场无关!

    7. 有任何侵权问题请联系E-mail [email protected]

    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    今日签到
    搜索