vue加载中图片和加载失败图片的占位图

对于图片较多的项目来说，网络比较慢的话，图片就会加载不出来而导致页面乱了，或者某张图片在服务被删了，默认的样式也是很丑的，所以我们有必要对其优化一波。

方案一：

const error_img = require('../assets/img_zhanwei@3x.png');
var loadImg=function(imgSrc){return 'this.onload=null;this.src='+'"'+imgSrc+'";';
};
var errorImg=function(){return 'this.onload=null;this.src='+'"../../static/img/avatar13@3x.png";'
};

<img :src="_default.error_img" :onload="_default.loadImg(item.base_pic)" :onerror="_default.errorImg()">

先给img的src绑定一个默认的占位图，然后onload里面返回真正的图片地址，在onerror里返回占位图片。
1、本在打算在onload里面通过new Img()获得图片宽高来判断图片是否可用，这样就省去了onerror事件，但是获取图片宽高要放在onload里面，形成了异步函数无法直接return
2、就是在事件中，要加上this.οnlοad=null，否则会出现重复调用的问题。

如果你觉得这样写太麻烦，也可以给所有的img标签添加时间，而不是像我这样的一个一个添加。

如果有其他方案，大家可以在下方发表自己的看法，我也会在这里补充

vue加载中图片和加载失败图片的占位图相关推荐

短视频系统源代码，加载本地图片和加载网络图片
在短视频系统源代码中,上传照片时会涉及到加载本地图片或加载网络图片的情况,下面介绍一下相关代码从布局开始 <?xml version="1.0" encoding=&quo ...
html5动态加载图片和加载视频
这两在做一个动态加载图片的东西,有点类似QQ发说说里面附带图片的那种,经过测试可以任意添加.删除,然后该删除的位置被后一位自动填充,还有一个bug,就是最后一个图片的控件没做处理,删掉最后一个就会导致 ...
android grideview 图片png透明,Android完美解决GridView异步加载图片和加载大量图片时出现Out Of Memory问题...
众所周知,我们在使用GridView或者ListView时,通常会遇到两个棘手的问题: 1.每个Item获取的数据所用的时间太长会导致程序长时间黑屏,更甚会导致程序ANR,也就是Application ...
Keras中保存和加载权重及模型结构
微信公众号 1. 保存和加载模型结构 (1)保存为JSON字串 json_string = model.to_json() (2)从JSON字串重构模型 from keras.models impor ...
unity保存游戏数据_在Unity中保存和加载玩家游戏数据
unity保存游戏数据 In this tutorial, we'll learn to implement Save/Load game functionality in our game. We ...
JQuery图片加载显示loading和加载失败默认图片
在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class=&q ...
python的HTML文件中使用和加载CSS文件
目录 1.关于pycharm中CSS文件的创建 2.创建完成之后,进行测试 1.关于pycharm中CSS文件的创建 2.创建完成之后,进行测试 1.关于pycharm中CSS文件的创建: https ...
处理图片加载中与加载失败的组件
实现思路 1.props支持传入最终要显示的图片.加载中图片.加载失败图 2.data定义两个变量,imgUrl存储当前显示的图片.error代表状态,包括0-加载中.1-加载成功.2-加载失败 3. ...
unity保存加载慢_掌握Unity 5中的保存和加载功能
unity保存加载慢 Thanks to Vincent Quarles for kindly helping to peer review this article. 感谢Vincent Quarl ...
oracle中spool卸数,Oracle中如何快速的卸载和加载数据?
前几天有个朋友在MSN上问,如何能更快速的从数据库中卸载和加载数据,他原来是用sql查询spool出来,效率很低. 这让我想起DCBA的一个工具ociuldr,这个工具是用C写成的,通过OCI和数据库 ...

vue加载中图片和加载失败图片的占位图

vue加载中图片和加载失败图片的占位图相关推荐

最新文章

热门文章