html网页图片加载失败的友好处理方式
网络环境总是多样且复杂的,一张网页图片可能会因为网路状况差而加载失败或加载超长时间,也可能因为权限不足或者资源不存在而加载失败,这些都会导致用户体验变差,所以我们需要对图片加载失败时的情况进行一个弥补处理。
方法一:在img标签上使用内联事件处理图片加载失败的情况,引入图片数量少的话可以这么做,网页内图片较多的时候不推荐。(default.png是图片加载错误时替换的图片资源,可以自行修改路径和文件名。)
<img src='xxxxx' onerror="this.src = 'default.png'">
方法二:为所有img标签统一添加error处理事件,在捕获阶段截获并触发函数,从而减少性能损耗。
document.addEventListener(
'error',
e => {
let target = e.target
const tagName = target.tagName || ''
if (tagName.toLowerCase = 'img') {
target.src = 'default.png'
}
target = null
},
true
)
方法三:为每个img标签额外添加一个data-retry-times计数属性,当重试超过限制次数后就用base64图片作为替代。
document.addEventListener(
'error',
e => {
let target = e.target
const tagName = target.tagName || ''
const curTimes = Number(target.dataset.retryTimes) || 0
if (tagName.toLowerCase() === 'img') {
if (curTimes >= 3) {
target.src = 'data:image/png;base64,xxxxxx'
} else {
target.dataset.retryTimes = curTimes + 1
target.src = target.src
}
}
target = null
},
true
)
html网页图片加载失败的友好处理方式的更多相关文章
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- WebForm、MVC图片加载失败处理
还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...
- JavaScript-onerror事件:图片加载失败后不显示
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- js img图片加载失败,重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- css背景图片加载失败,页面部分图标无法显示
1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...
随机推荐
- Django 之必知必会三板斧
一.HttpResponse 在django.http 模块中定义了HttpResponse 对象的API,HttpRequest 对象由Django 自动创建,不调用模板,直接返回数据. 1 在 a ...
- 8_Quartz
一. 引言 1.1 简介 Quartz: http://www.quartz-scheduler.org/ 是一个 定时任务调度框架 ,比如我们遇到这样的问题 想在30分钟后, 查看订单是否支付, 未 ...
- IDEA设置问题
一. IDEA 相关设置 1.1 去除SQL语句的黄色背景 Settings > Editor > Inspections > SQL No data sources configu ...
- NOIP2015 普及组 洛谷P2671 求和 (数学)
一道数学题...... 采用分组的思想,我们要统计答案的数对满足两个条件:同奇偶,同颜色.所以可以按这两个要求分组. 然后就是分组处理了,对于每组(有k个数),这里面的任意两对数都是满足条件的,可推出 ...
- VLQ & Base64 VLQ 编码方式的原理及代码实现
目录 VLQ Base64 VLQ VLQ VLQ (Variable-length quantity)是一种通用的,使用任意位数的二进制来表示一个任意大的数字的一种编码方式. 编码实现: ** 对数 ...
- asp.net core web 解决方案多项目模板制作打包总结
一.文件夹\项目结构 1.1.文件夹 net6.0:针对.net 6.0 项目模板 net6.0pack:针对net6.0打包 1.2.项目结构 Web\WebApi多项目.各层项目.单元测试项目 目 ...
- Persistent data structure 不可变数据结构
持久性变数据不要和持久储存相混淆 在计算机中持久性数据或非临时数据是一种数据结构,在修改时始终保持其自身的先前版本.这些数据实际上是不可变的,因为对这类数据操作不会明显的改变数据结构,而是始终产生新的 ...
- Vue学习之--------全局事件总线(2022/8/22)
文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...
- C# Linq 查询汇总
分组取值.求和.计数 1 var resultlist = orderllist.GroupBy(oo => new { oo.Deptname, oo.Userid, oo.Username ...
- 微信小程序之顶部导航栏
wxml: <!--导航条--><view class="navbar"> <text wx:for="{{navbar}}" d ...