vue中的图片加载与显示默认图片
HTML:
<div class="content-show-img">
<div class="show-img">
<img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg">
</div>
</div>
JS:
Vue.prototype.successLoadImg = function(event) {
if (event.target.complete == true) {
event.target.classList.remove("default-image");;
var imgParentNode = event.target.parentNode;
if(imgParentNode.classList.contains('show-img')==true){
imgParentNode.style.background = "#000";
}
}
};
Vue.prototype.errorLoadImg = function(event) {
event.target.classList.add("default-image");;
};
针对尺寸不统一的:先显示默认图片,加载成功时移除默认图片,填充背景。
vue中的图片加载与显示默认图片的更多相关文章
- JS图片加载失败显示默认图片
代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- vue中img图片加载中以及加载失败显示默认图片问题
加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...
- JS图片加载失败用默认图片代替
1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- JS检查当图片不存在时显示默认图片和键盘大小写键状态
当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...
- 从代码分析Android-Universal-Image-Loader的图片加载、显示流程
从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中 ...
随机推荐
- C#中整型数据类型
C#中整型数据类型byte是8位的无符号整数,可是它表示的值的范围是0-255才3位啊怎么说是8位啊?谁能帮我解答 全部答案 八位二进制.0000 0000到1111 1111相当于十进制0-25 ...
- 禁止移动端input弹出软键盘
在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...
- 【bzoj3312】[Usaco2013 Nov]No Change 状态压缩dp+二分
题目描述 Farmer John is at the market to purchase supplies for his farm. He has in his pocket K coins (1 ...
- Python 源码剖析(三)【字符串对象】
三.字符串对象 1.PyStringObject与PyString_Type 2.创建PyStringObject对象 3.Intern 机制 4.字符缓冲池 5.PyStringObject 效率相 ...
- poj 1018 Communication System (枚举)
Communication System Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 22380 Accepted: ...
- [CF613D]Kingdom and its Cities
description 题面 data range \[n, q,\sum k\le 10^5\] solution 还是虚树的练手题 \(f[0/1][u]\)表示\(u\)的子树内,\(u\)是否 ...
- [COGS2652]秘术「天文密葬法」
description 题面 给个树,第\(i\)个点有两个权值\(a_i\)和\(b_i\),现在求一条长度为\(m\)的路径,使得\(\frac{\sum a_i}{\sum b_i}\)最小 d ...
- BZOJ1040 骑士 【环套树 树形dp】
1040: [ZJOI2008]骑士 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 5611 Solved: 2166 [Submit][Stat ...
- PHP实现---汉字简体繁体转换
這是以class包裝好的簡繁體轉換的class, 另外需要兩個table檔: 1. http://www.jerry.com.tw/php/big5.map 2. http://www.jerry.c ...
- SELECT LAST_INSERT_ID() 的使用和注意事项
SELECT LAST_INSERT_ID() 的使用和注意事项 尊重个人劳动成果,转载请注明出处: http://blog.csdn.net/czd3355/article/details/7130 ...