img标签的onerror事件

img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,用户体验会下降。

通过百度,可以给img标签加背景图片,代码如下:

.headLogo img{display: block;width: 270px;height: 60px;background: url(../images/logo.png) no-repeat 0 0;margin: 25px 0;}

同时我们想去除载入图片失败时显示在左上角的碎片图标,这个要借用img标签的onerror事件和javascript,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下:

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

当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。
但问题来了,如果logoError.png 也不存在,则继续触发 onerror,导致循环,故会出现打开网页时提示 Stack overflow at line: 0错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror。

解决方法:
第一种:去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且容易加载而存在。
第二种:控制它不循环,代码如下:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无极低代码,免费工具在线实用工具分享

在当今数字化的时代&#xff0c;我们需要尽可能地减少手动操作&#xff0c;提高工作效率。这就是为什么我们需要一些在线工具来帮助我们完成一些繁琐的任务。以下是一些无极低代码网集成的在线工具&#xff0c;可以帮助您更快、更轻松地完成任务。 项目管理 项目周期计算&…

docker+mongodb设置数据库的账号和密码

1、在docker宿主机构建mongodb数据持久化目录 # 数据文件 mkdir -p /usr/local/mongodb/data# 日志文件 mkdir -p /usr/local/mongodb/log2、拉取镜像, 选择官方版本&#xff08;亲测16.x版本的mongodb不可用&#xff0c;可安装指定版本&#xff09; docker search mongo do…

ARP解析MAC地址的全过程(ARP的工作机制)

目录 ARP解析MAC地址的过程&#xff1a; 源码等资料获取方法 以太网环境下&#xff0c;同一个网段的主机之间需要互相知道对方的MAC地址&#xff0c;才能访问。 TCP/IP协议栈从上层到下层的封装过程中&#xff0c;第三层封装需要知道目的IP&#xff0c;第二层封装需要知道目…

Java 设计模式——迭代器模式

目录 1.概述2.结构3.案例实现3.1.抽象迭代器3.2.具体迭代器3.3.抽象聚合3.4.具体聚合3.5.测试 4.优缺点5.使用场景6.JDK 源码解析——Iterator 1.概述 迭代器模式 (Iterator Pattern) 是一种行为型设计模式&#xff0c;它提供一种顺序访问聚合对象&#xff08;如列表、集合等&…

使用亚马逊(AWS)云服务在S3上实现图片缩放功能(CloudFront/S3[AccessPoint/LambdaAccessPoint])

亚马逊云服务中的S3对象存储功能和国内阿里云的oss对象存储使用基本一致。但是涉及到存储内容处理时&#xff0c;两家有些差别。 比如&#xff1a;对于云存储中的图片资源&#xff0c;阿里云比较人性化对于基本的缩放裁剪功能已经帮我们封装好了&#xff0c;只需要在url地址后…

python正则+多线程(代理)+线程池+协程

正则表达式 常用元字符 . 匹配除换行符以外的任意字符 \w 匹配字幕或数字或下划线 \s 匹配任意空白字符 \d 匹配数字 \n 匹配一个换行符 \t 匹配一个制表符 ^ 匹配字符串的开始 # 开发常用 $ 匹配字符串的结尾\W 匹配非字母或数字或下划线 \D 匹配非数字 \S 匹配非空白符 a|b …

【Express.js】全局变量与配置文件

全局变量与配置文件 通常我们会将一些项目的配置信息写在一个文件内&#xff0c;然后读入内存并使用。在 express 中使用全局变量有多种方案&#xff0c;我们一起看看有哪些常用的方案 准备工作 拷贝第一节的HelloWorld项目 准备一个Resp.js模块&#xff1a; module.expor…

Mongodb 对嵌套文档数组进行查询操作

查询非嵌套文档数组 非嵌套文档的数组&#xff0c;数组由数字、字符串等元素组成。 以下方法对数组字段进行查询操作的示例&#xff0c;包括对数组匹配查询&#xff0c;元素的增、删、改操作&#xff0c;空数组、非空数组查询等。 测试数据 连接到 mongodb 数据库&#xff0…

Bean 作用域与生命周期

Bean 作用域与生命周期 ​ 对于 Spring 来说&#xff0c;核心操作对象就是存和取 Bean &#xff0c;接下来就 Bean 的作用域与生命周期进行探讨。 文章目录 Bean 作用域与生命周期一、作用域的定义1.1、Bean 的6种作用域1.2、Bean作用域设置方法 二、Bean 的生命周期2.1、Bean…

postgresql还原bak

1、第一步肯定是要新建自己还原的目标数据库&#xff0c;例如&#xff1a; 2、进入postgresql的安装目录下的bin目录下 然后地址栏输入cmd进入命令 输入以下 psql -h localhost -U postgres -p 5432 -d SamsinoYardStandard_karamay -f "D:\desktop\zk\20230628.bak&quo…

verilog实现数码管静态显示

文章目录 verilog实现数码管静态显示一、任务要求二、实验代码三、仿真代码四、仿真结果五、总结 verilog实现数码管静态显示 一、任务要求 六个数码管同时间隔0.5s显示0-f。要求&#xff1a;使用一个顶层模块&#xff0c;调用计时器模块和数码管静态显示模块。 二、实验代码…

将Spring Boot项目打包部署到阿里云linux服务器

首先 你要保证自己的服务器上有java环境 如果没有可以参考我的文章 linux服务器中安装java JDK1.8版本 然后 我们打开我们的Spring Boot项目 双击 package 生命周期进行打包 打包完成之后 我们找到 target 下面会有一个jar包 然后 我们右键它 如下图操作 系统就会帮你打开它所…

OpenCV for Python 学习第四天 :通道的获取与合并

上一篇博客&#xff0c;我们学习了如何通过更快的item()和itemset()的方法访问图片&#xff0c;以及了解了图像的兴趣位置的获取方法&#xff0c;那么今天&#xff0c;我们将学习通道的处理方法&#xff0c;通过通道的拆分和合并的实例&#xff0c;让大家更好的了解咱们有关于B…

STM32知识合集

目录 STM&#xff1a; GPIO&#xff1a; 串口通信协议&#xff1a; 1.USART&#xff1a; 2.I2C&#xff1a; 3.Modbus 4.RS232 5.RS485&#xff1a; SPI通信协议 万用表使用&#xff1a; 中断系统&#xff1a; NVIC&#xff1a; EXTI &#xff1a; 时钟系统&…

前端笔记_OAuth规则机制下实现个人站点接入qq三方登录

文章目录 ⭐前言⭐qq三方登录流程&#x1f496;qq互联中心创建网页应用&#x1f496;配置回调地址redirect_uri&#x1f496;流程分析 ⭐思路分解⭐技术选型实现&#x1f496;技术选型&#xff1a;&#x1f496;实现 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本…

JMeter做http接口功能测试

1. 普通的以key-value传参的get请求 e.g. 获取用户信息 添加http请求&#xff1b;填写服务器域名或IP&#xff1b;方法选GET&#xff1b;填写路径&#xff1b;添加参数&#xff1b;运行并查看结果。 2. 以Json串传参的post请求 e.g. 获取用户余额 添加http请求&#xff1b;…

设计模式-原型模式

目录 一、传统方式 二、原型模式 三、浅拷贝和深拷贝 克隆羊问题&#xff1a; 现在有一只羊tom&#xff0c;姓名为: tom,年龄为: 1&#xff0c;颜色为: 白色&#xff0c;请编写程序创建和tom羊属性完全相同的10只羊。 一、传统方式 public class Client {public static vo…

WMTS 地图切片Web服务 协议数据解析

1. WMTS 描述 WMTS(Web Map Tiles Service):地图切片Web服务。 2. 数据示例&#xff1a; arcgis online 导出的wmts xml&#xff1a; https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS 内容解析&#xff1a; contents中可能包…

linux原生安装mongodb

1.下载tgz文件,解压缩并将文件夹重命名为mongodb wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.5.tgz 2.新建存储目录 #数据存储目录 mkdir -p /mongodb/single/data/db #日志存储目录 mkdir -p /mongodb/single/log 3.编辑配置文件(默认进去先…

J2EEJSP自定义标签库01out标签if标签

目录 一.什么是标签 二.JSP自定义标签库 2.1 JSP标签库是什么 2.2 处理流程 2.3 如何自定义标签 2.4 标签类型 三.开发示例 3.1 out标签 1.创建助手类 2.编写tld&#xff08;标签库的描述&#xff09;文件&#xff0c;&#xff08;必须放在WEB-INF目录或其目录下&a…