网站开发与设计现状,知名企业logo,阿里巴巴如何建设网站,武夷山网站推广img标签中的src图片加载失败#xff0c;原来的图片位置会出现一个碎片图标#xff0c;用户体验会下降。
通过百度#xff0c;可以给img标签加背景图片#xff0c;代码如下#xff1a;
.headLogo img{display: block;width: 270px;height: 60px;background: url(../image…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事件和javascriptimg标签支持onerror 事件在装载文档或图像的过程中如果发生了错误就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下
img srcimages/logo.png οnerrοrjavascript:this.srcimages/logoError.png;当图片不存在时将触发 onerror而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png图片不存在将显示 logoError.png。 但问题来了如果logoError.png 也不存在则继续触发 onerror导致循环故会出现打开网页时提示 Stack overflow at line: 0错误。特别说明如果图片存在但网络很不通畅也可能触发 onerror。
解决方法 第一种去掉 onerror 代码或者更改 onerror 代码为其它或者确保 onerror 中的图片足够小并且容易加载而存在。 第二种控制它不循环代码如下
script typetext/javascriptfunction nofind(){var imgevent.srcElement;img.srcimages/logoError.png;img.οnerrοrnull; 控制不要一直跳动}
/scriptimg srcimages/logo.png οnerrοrnofind(); /
