为了美观当网页图片不存在时不显示叉叉图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。
其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:

1、让这个图片元素隐藏:

<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2、用默认的图片替换:

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。

因此, 需要用下面两种方法解决:

a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。

b、控制onerror事件只触发一次,需要增加这句话:this.onerror=null; 增加后如下:

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.onerror=null"/>

经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。

img标签设置默认图片的更多相关文章

  1. img标签使用默认图片的一种方式

    基于html5提供的onerror这个时间属性.

  2. 微信小程序开发——设置默认图片、错误加载图片

    小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...

  3. img图片不存在时设置默认图片

    当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用. 其实,可 ...

  4. html select 标签设置默认选中

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  5. img设置默认图片最简单的解决方法

    <img src='图片的路径' onerror='this.src="如果图片不存在,则使用该图片"' 这个解决方法除了简单外,还有一个优点. 就是当你不知道图片是否存在, ...

  6. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

  7. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  8. js处理img标签加载图片失败,显示默认图片

    1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...

  9. 设置Input标签Date默认值为当前时间

    需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date ...

随机推荐

  1. 深度学习课程笔记(三)Backpropagation 反向传播算法

    深度学习课程笔记(三)Backpropagation 反向传播算法 2017.10.06  材料来自:http://speech.ee.ntu.edu.tw/~tlkagk/courses_MLDS1 ...

  2. 3、Python函数详解(0601)

    回顾: re search,findall,finditer.sub,subn function ()    调用函数 def func_name(arg1,....)   生成函数对象 func_s ...

  3. HDU 1251 统计难题(字典树模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1251 题意:给出一些单词,然后有多次询问,每次输出以该单词为前缀的单词的数量. 思路: 字典树入门题. #inc ...

  4. HDU 4311 Meeting point-1(曼哈顿距离最小)

    http://acm.hdu.edu.cn/showproblem.php?pid=4311 题意:在二维坐标中有n个点,现在要从这n个点中选出一个点,使得其他点到该点的曼哈顿距离总和最小. 思路: ...

  5. 【Java】【事件处理机制】

    import javax.swing.*;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.Actio ...

  6. WebPack基本概念以及基本使用

    入门Webpack,看这篇就够了 2017年9月18日更新,添加了一个使用webpack配置多页应用的demo,可以点击此处查看 2017年8月13日更新,本文依据webpack3.5.3将文章涉及代 ...

  7. RN 上传文件到以及上传文件到七牛云(初步)

    本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...

  8. 【BZOJ】3209: 花神的数论题

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3209 显然是按照二进制位进行DP. 考虑预处理$F[i][j]$表示到了二进制的第$i$位 ...

  9. 设计模式(一)Chain Of Responsibility责任链模式

    设计模式篇章,源于网课的学习,以及个人的整理 在我们接收用户提交的字符时,常常会使用到过滤,在学习责任链模式前,我们是这样做的 1.定义一个类 public class MsgProcesser { ...

  10. DOM结构及优化

    1.DOM树中三种常见的DOM节点: 1>元素节点:上图中<a>,<h1>等都是元素节点,即标签 2>文本节点:向用户展示的内容,如...中的"文档标题& ...