#情景分析:

  有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢?

#解决方案:

  可以借用img标签的onerror事件,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下: 

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

  当图片images/logo.png不存在时,将触发 onerror事件,而 onerror 中又为该 img 指定了images/logoError.png图片。也就是说图片images/logo.png存在则显示logo.png,图片images/logo.png不存在将显示 logoError.png。

  *问题:如果images/logoError.png 也不存在,则会继续触发 onerror事件,导致死循环,故会出现打开网页时提示 Stack overflow at line: 0 错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror事件

  *解决方法:控制它不循环,代码如下:

 <script type="text/javascript">
function imgerrorfun(){
var img=event.srcElement;
img.src="data:images/logoError.png";
img.onerror=null; 控制不要一直跳动
}
</script> <img src="data:images/logo.png" onerror="imgerrorfun();" />

***————————————————————————————————————————***

img标签的onerror事件的更多相关文章

  1. 加载默认图片,如何避免img标签陷入onerror事件死循环

    当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...

  2. 图片(img标签)的onerror事件

    打开网页时提示 Stack overflow at line: 0.我做了截图如下: 经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" oner ...

  3. <img/>标签onerror事件在IE下的bug和解决方法

    IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框.经分析,这个bug是由于img标签的onerror事件引起的.程序中用到的代码片段如下:正常情况下显示src所指路 ...

  4. 在img标签上尽量不要使用onerror事件

    在img标签上尽量不要使用onerror事件 因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的,但是如果刚好onerror ...

  5. img标签中的onerror事件

    img标签中有一个onerror事件.是当我引用的src属性获取不到图片或者网络错误导致无法正常显示我src属性的图片时,显示的提示错误图片或者是可以代替的万能图片. 用法: <img src= ...

  6. 基于window.onerror事件 建立前端错误日志

    QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...

  7. img onerror事件

    怪自己知道的太少,img标签有onerror这个事件,我是才刚知道,恕我愚昧,既然是第一次遇到,而且又是一个自己从没有涉及过得的东西,所以我希望通过这个随笔来是自己印象深刻,此文仅仅只是让自己印象深刻 ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  9. img的onerror事件(瑕疵+解决办法)【转】

    显示图片的时候,为了更好的用户体验,可能会把一些没有图片的内容也用图片样式显示出来,此时我们就要用到IMG的onerror事件了,注意MyEclipse的快捷键alt+/是没有的. < img ...

随机推荐

  1. Row_Number() over()

    分页 ROW_NUMBER() OVER (order by ID) 是先把ID列排序,再为排序以后的每条ID记录返回一个序号.

  2. SpringBoot之get请求404

    后台:SpringBoot 前台:VUE 异常:调get接口,返回404 场景:get请求传参,后台返回n条数据,不传参则返回所有 原因:原请求url为"~/one/{param}" ...

  3. SpringBoot部署jar与war

    jar部署与启动/关闭 1.打包 clean 清理已有target目录 package 重新打包 获取打包路径,通过 scp命令发送到服务器端,scp -P ${port} ${.jar} ${use ...

  4. BZOJ4946[Noi2017]蔬菜——线段树+堆+模拟费用流

    题目链接: [Noi2017]蔬菜 题目大意:有$n$种蔬菜,每种蔬菜有$c_{i}$个,每种蔬菜每天有$x_{i}$个单位会坏掉(准确来说每天每种蔬菜坏掉的量是$x_{i}-$当天这种蔬菜卖出量), ...

  5. AHOI(十二省联考)2019 退役记

    我也想退役失败.jpg Day 0 我才知道联考原来是4.5h? 下午居然还有讲题,感觉变得正规多了. 试机敲了LCT,NTT,SA,加起来花了大概40min,基本1A,感觉海星.键盘似乎有点过于灵敏 ...

  6. BZOJ3277 串 【后缀数组】【二分答案】【主席树】

    题目分析: 用"$"连接后缀数组,然后做一个主席树求区间内不同的数的个数.二分一个前缀长度再在主席树上求不同的数的个数. 代码: #include<bits/stdc++.h ...

  7. 进程PID 与PPID

    # 同一个程序执行多次是多个进程 import time import os print('爹是:',os.getppid()) #查看父进程 print('me是: ',os.getpid()) # ...

  8. ubuntu 16.04 主题美化及终端美化

    如果你使用的是图形界面,你会发现ubuntu默认的界面真是丑的一批,所以简单美化一下: 1.安装unity-tweak-tool: sudo apt-get install unity-tweak-t ...

  9. 微信小程序原生开发简介

    简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法 文档:https://develope ...

  10. sg函数小结

    sg函数小结 sg函数是处理博弈问题的重要工具. 我们知道sg(x)=mex{sg(j)|x能到达状态j} sg(x)=0时代表后手赢,否则先手赢. 对于一个问题,如果某些子问题是相互独立的,我们就可 ...