ionic开发——图片加载失败或不存在时显示提示图片的解决方法
来源:互联网 发布:手机测光表软件 编辑:程序博客网 时间:2024/05/18 00:32
当图片加载失败或者不存在的时候,我们需要一张提示图片来代替他。用判断就太麻烦了,img有自己的方法onerror , 当找不到图片的时候就会执行onerror里面的代码
例如:
<img src="1.jpg" onerror="2.jpg"/>
当1.jpg找不到的时候,会自动加载2.jpg.
那如果2.jpg也找不到怎么办?就会一直执行onerror里面的代码,陷入死循环。
所以,我们可以这么写,代码如下:
<img src="1.jpg" alt="" onerror="nofind(this)">
JS代码:
function nofind(obj){ obj.src = '2.jpg'; obj.onerror = null;}
当图片加载失败的时候,如果我们还有其他需求,都可以写在这个nofind()方法里了
那么,在ionic开发中,angularjs里怎么使用呢?angualrjs 代码如下:
<img ng-src="1.jpg" err-src="2.jpg"/>
JS代码如下:
var app = angular.module("MyApp", []);app.directive(‘errSrc‘, function() {return { link: function(scope, element, attrs) { element.bind(‘error‘, function() { if (attrs.src != attrs.errSrc) { attrs.$set(‘src‘, attrs.errSrc); } }); } }});
如果需要执行其他的程序写在element.bind('error',function(){} 这个方法里面就可以。具体操作可以输出scope,element,attrs查看里面的属性和方法进行操作,不懂得可以评论留言给我。
0 0
- ionic开发——图片加载失败或不存在时显示提示图片的解决方法
- ionic加载网络图片资源的解决方法
- ionic开发——加载在线图片完整功能实现方法(正在加载-加载成功-加载失败)
- SDWebImage加载Https图片失败的解决方法
- 图片不存在时,火狐(FireFox)不显示红色叉(图片占位符)的解决方法。
- 图片加载失败或默认图片
- ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
- 图片不存在时,显示一个默认的图片
- 图片不存在时显示一个默认的图片
- html图片加载失败时显示默认图片
- 图片加载失败,显示默认图片
- 图片加载失败,显示默认图片
- 如果图片加载失败,显示默认图片
- 图片加载失败显示默认图片
- 网络加载图片时显示错位的解决方法
- 当图片不存在时显示默认图片
- 图片不存在时,显示默认图片
- html图片的alt与title:alt:图片加载失败时的提示信息;title:鼠标放上时的提示信息
- 深入浅出RxJava(一:基础篇)
- iOS10推送报错NSCocoaErrorDomain Code=3000
- nohup用法
- 1018 锤子剪刀布
- C++小知识
- ionic开发——图片加载失败或不存在时显示提示图片的解决方法
- listener.log文件过大导致oracle数据库连接非常慢
- FormsAuthentication.SetAuthCookie
- 数位dp,hdu5898
- 2016 ACM/ICPC Asia Regional Qingdao hdu5880 Family View
- 第17 & 18 章 Jenkins –服务器维护 & 持续部署
- 微服务架构的基础框架选择:Spring Cloud还是Dubbo?
- CTF--2015中国西安电子科技大学XDCTF网络安全大赛之pwn
- Java工程师成神之路~