htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来。那么为了提高用户体验,都会显示一个默认图。
动态加载图片失败时,显示默认图的2种方案
查了一下img onerror文档和img onload文档,发现导致前端最终图片加载失败的情况会比较多,纯靠后端来解决很麻烦。而这两个方法从不同的方向都能解决无破裂图的效果。前者是从图片加载失败的角度入手,后者这是从加载完成(就是能正常加载)的角度入手。
1. 利用onerror方法更改img的src为默认图片路径。
示例代码:
优点:1、无需添加额外的标签;
缺点:1、默认图加载失败时,破裂图仍旧存在。2、统一网站不同尺寸比例的图片可能需要多个尺寸的默认图。
2. 利用onerror方法更改img的样式display:none;,让img标签本身不可见。
示例代码:
优点:1、完美解决无破裂图;2、多尺寸比例的图片时,可能一个默认图就可以
缺点:1、需添加额外的标签。
3. 利用onload方法更改img的样式display:inline-block;,让img标签显示(一开始隐藏img标签)。
示例代码:
优点:1、完美解决无破裂图;2、多尺寸比例的图片时,可能一个默认图就可以
缺点:1、需添加额外的标签。
个人推荐方案二和方案三。
ps:onerror方法里一般都会带this.onerror = null;,这是为了防止onerror方法造成的死循环导致内存溢出。假如正常图片加载失败,那么src会换成默认图的url,如果默认图也加载失败,又会加载默认图,一直循环下去。this.onerror = null;等于重置了onerror方法,从而达到只执行一次的目的。
测试的浏览器:IE9,IE10,edge,chrome83.0.4103.116,Firefox76.0.1,Opera68.0.3618.173,Safari13.1.1 (15609.2.9.1.2)。(其实方案二在最新浏览器版本基本都没破裂图了)
附上测试的效果图:
效果图.png
最后,附上以上方案的调试源码:
样图:
img-default.png
test.png
图片加载失败,去掉默认的破裂图
/* reset.css start*/
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 62.5%;
}
body {
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
font-size: 1.4rem;
line-height: 2.5rem;
color: #000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
abbr, img, object, a img, :link img, :visited img, a object, :link object, :visited object {
border: 0;
}
address, caption, cite, code, dfn, em, th, var, i {
font-style: normal;
font-weight: normal;
}
/* reset.css end*/
/*develop css start*/
.container{
padding: 30px;
}
/*加载图片异常*/
.errorimg{
letter-spacing: -1em;
margin: 0 auto;
padding: 10px;
min-height: 120px;
}
.errorimg .item,
.errorimg img{
display: inline-block;
letter-spacing: normal;
margin: 10px;
width: 200px;
height: 120px;
border: 1px solid #a7a1a1;
overflow: hidden;
}
.errorimg2{
letter-spacing: -1em;
margin: 0 auto;
padding: 10px;
min-height: 120px;
}
.errorimg2 .img{
display: inline-block;
letter-spacing: normal;
margin: 10px;
width: 200px;
height: 120px;
border: 1px solid #a7a1a1;
overflow: hidden;
background: url("img/img-default.png") no-repeat center;
background-size: cover;
}
.errorimg2 .img img{
width: 200px;
height: 120px;
}
.errorimg2.type3 .img img{
display: none;
}
动态加载图片
分类
img/test.png
img/test-no.png
img/img-default.png
img/img-default-no.png
onerror加载默认图片方案
onerror隐藏img标签方案
onload显示加载完成的图片
$(function () {
function loadImgs() {
//动态加载图片(onerror加载默认图片方案)
var html = '';
html += '';
html += '';
html += '';
html += '';
$('#test').append(html);
//动态加载图片(onerror隐藏img标签方案)
var html2 = '';
html2 += '
';
html2 += '
';
html2 += '
';
html2 += '
';
$('#test2').append(html2);
//动态加载图片(onerror隐藏img标签方案,onload显示正常图片)
var html3 = '';
html3 += '
';
html3 += '
';
html3 += '
';
html3 += '
';
$('#test3').append(html3);
}
loadImgs();
});
htmlimg图片加载失败_动态加载图片失败的默认图显示相关推荐
- html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
- html加载less,javascript – 动态加载less.js规则
我正在看使用 less. js(看起来不错),但我们的网站要求在初始页面加载后,动态加载一些样式.但是,似乎所有的LESS样式表都必须在less.js脚本加载之前加载.即这样做 但是如果行被交换,则它 ...
- 【Android 逆向】加壳技术简介 ( 动态加载 | 第一代加壳技术 - DEX 整体加固 | 第二代加壳技术 - 函数抽取 | 第三代加壳技术 - VMP / Dex2C | 动态库加壳技术 )
文章目录 一.动态加载 二.第一代加壳技术 ( DEX 整体加固 ) 三.第二代加壳技术 ( 函数抽取 ) 四.第三代加壳技术 ( Java 函数 -> Native 函数 ) 五.so 动态库 ...
- VC静态加载DLL和动态加载DLL
VC静态加载DLL和动态加载DLL 1. 静态加载DLL 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头 ...
- vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
- 滚屏加载--无刷新动态加载数据技术的应用
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...
- php动态页面加载慢,通过动态加载JS文件提升网站访问速度
相对与HTML,CSS,javascript是最影响浏览器性能的,因为浏览器在遇到<script>标签时,必须等待js代码下载和执行完毕后再执行后面的内容,因此当页面中js文件过多时,网站 ...
- layui的tree如何实现动态加载_layui tree动态加载 利用CAReplicatorLayer实现的加载动画 - 电脑常识 - 服务器之家...
layui tree动态加载 利用CAReplicatorLayer实现的加载动画 发布时间:2017-04-12 来源:服务器之家 在上一篇中,笔者简要介绍了CAReplicatorLayer,在本 ...
- android listview动态加载数据,ListView动态加载数据
当listview需要加载的数据过多时,若一次性载入则速度会相当缓慢,影响用户体验,这时候就需要动态加载数据,即每次载入固定长度的数据,android market的listview就是采用这种方式, ...
最新文章
- PXE自动化安装系统
- Js选择框脚本 移动操作select 标签中的 option 项的操作事项
- [云炬创业管理笔记]第三章测试5
- 七十八、Antd 实现 TodoList 页面布局和Redux入门
- 开发者新春回血大礼包助你2021畅行无压力!
- json 格式化工具_如何在命令行中优雅地处理JSON
- [导入]C#中TextBox只能输入数字的代码
- Pr教程,Premiere Pro 中常用视频格式
- C# 使用PrintDocument类打印标签
- 【Java】 环境变量如何配置?
- 计算机考研需要分数线,计算机考研分数线是多少?
- 智能门锁电路图_智能门锁原理图,智能锁工作原理科普
- 木瓜移动创始人沈思专访——从平台到孵化器
- 使用 C# 将数字转换成大写人民币
- springmvc+mybatis 无极限树形结构菜单
- java如何打印棋盘_java打印国际象棋棋盘的方法|chu
- mysql 快照_Mysql可重复读(2) —— 快照真的就是快照吗
- Centos 防火墙介绍
- 初遇初识初知接下来是什么_初识爱|《傲慢与偏见》书评
- python3爬虫下载网页上的pdf
热门文章
- caffe2、detectron安装遇到的问题归纳
- VC Office2007界面对话框实现(续)
- 运维工程师需要掌握的基础技能有哪些?
- 在Arcgis中如何利用已经有的中国地图配准JPG、PNG等图片
- 计算机大学生必玩游戏,70%大学生用电脑玩游戏追剧,大一新生你还买电脑吗?家长们三思...
- static关键字的用法与作用
- FilterChain 接口
- JAVA公路车和骓特公路车评价_公路车的类型,公路车三大知名品牌
- 专访58沈剑:除了架构,我还想认真谈谈管理
- statement的概念及常用方法