js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:
1、如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数;
$("img").error(function(){
//当图片加载失败时,你要进行的操作
//$(this).attr('src','images/no_pic.jpg');
});
2、如果项目中没有jQuery这样的插件,可以使用HTML的DOM事件onerror事件处理;
HTML 中:
<element onerror="myScript">尝试一下
JavaScript 中:
object.onerror=function(){myScript};尝试一下
JavaScript 中, 使用 addEventListener() 方法:(注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。)
object.addEventListener("error", myScript); 支持的 HTML 标签: <img>, <input type="image">, <object>, <script>, <style>
js 图片加载失败处理方法的更多相关文章
- 微信小程序 图片加载失败处理方法
微信小程序 官方文档对image 媒体组件加载失败 没有太多的解释,使用中出现了几个小问题,今天抽空记录一下 WXML: <image class="userinfo-avatar&q ...
- JS图片加载失败用默认图片代替
1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...
- JS图片加载失败显示默认图片
代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...
- js img图片加载失败,重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
- css背景图片加载失败,页面部分图标无法显示
1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- WebForm、MVC图片加载失败处理
还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...
随机推荐
- Grafana---graph
主面板简单的命名为Graph.它提供了一组非常丰富的图形选项. 单击面板的标题将显示一个菜单.edit选项为面板打开了额外的配置选项. 一.General general允许定制面板的外观和菜单选项. ...
- ASIHttprequest 报错
(void)requestReceivedResponseHeaders:(NSMutableDictionary *)newResponseHeaders { if ([self error] || ...
- undefined let 作用域
const o = {uid:123,pid:'wwww'}const wxPayNotifyUrlBizInfo = (o) => { // TODO json let s = '' for ...
- Python星号*与**用法分析 What does ** (double star/asterisk) and * (star/asterisk) do for parameters? 必选参数 默认参数 可变参数 关键字参数
python中*号**的区别 - CSDN博客 https://blog.csdn.net/qq_26815677/article/details/78091452 定义可变参数和定义 list 或 ...
- MySQL中InnoDB存储引擎中的哈希算法
InnoDB存储引擎使用哈希算法来对字典进行查找,其冲突机制采用链表方式,哈希函数采用除法散列方式.对于缓冲池页的哈希表来说,在缓冲池中的Page页都有一个chain指针.它指向相同哈希函数值的页的. ...
- pycharm中导入自写模块时,模块下出现红线
问题描述: 在pycharm中导入自己写的模块时,得不到智能提示,并在模块名下出现下红线,但是代码可以执行,错误提示为下图所示: 原因:出现 以上情况,是因为文件目录设置的问题,pycharm中的最上 ...
- 启动 nodemanger 报错javax.security.sasl.SaslException: GSS initiate failed
最近启动 Hadoop, nodemanger 老挂,报kerberos 验证错误,各种查找原因,时间也同步,kint 也能登录到kerberos,一直找不到原因,最后发现是网关和远端的时间同步,但是 ...
- (1)虚拟机的安装与使用,linux系统安装
一.百度下载 VMware workStation 二.新建虚拟机 在这里分为典型和自定义,典型及许多磁盘类型及接口类型为默认,自定义高级则可以都做选择设置. 三.自定义(高级)安装 (1)点击下一步 ...
- 常用mongo语句
只列出指定字段db.getCollection('PUBLICACCOUNTS').find({},{NickName:1,UserName:1,FID:1,_id:0})获取微信公众号列表db.ge ...
- boost之算法
STL里的算法已经很好了,在boost里有几个小的算法 1.BOOST_FOREACH使用方法,定义一个容器里内部类型数据,容器作为参数传递. #include <iostream> #i ...