Vue进阶（四十四）：vue 图片加载完成事件

需求：当页面需要处理图片渲染完毕的时候，对图片进行加水印操作。
想到了image的onload事件，当图片加载完成之后再处理图片。

原生js

<img onload="get(this)"  src="..."  style="display: none"/>
<script type="text/javascript">
function get(ts){ts.style.display = 'block'
}
</script>

vue

div(:class="$style.main", v-show="show")img(:src="datas.image", @load="loadImage")data() {return {show: false,}
},
methods:{loadImage(){let _this = this_this.show = true}
}

在图片加载完成之后再处理图片，就可以解决元素无法找到的问题，问题解决。

Vue进阶（四十四）：vue 图片加载完成事件相关推荐

vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
vue进阶测试——生命周期和异步加载的微妙关系
本文继续探索vue中的坑,关于vue的生命周期和异步加载相关处理的文章还比较少,可能是自己没有用谷歌而用百度的缘故吧.关于异步操作和生命周期,会牵扯到浏览器的单线程处理机制,以及ES中的promise ...
【Vue】关于开发中本地图片加载失败的经验总结
文章目录 1. 图片存放在assets 2. 图片存放在static中 3. 其他需要注意的点我的源码: img或者el-avatar中的src没有提供静态值,而是绑定一个动态变量,如果这个变量的路 ...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
前端入门之(vue图片加载框架一)
前言: 之前做android的时候,会接触各种图片加载框架,也自己封装过,封装网络框架目的无非就是为了提高图片的复用性.减少内存消耗.监听图片的加载过程等等.换成web前端其实是一样的操作,好啦! 说 ...
关于图片加载错误的自定义处理(缺省图)
缺省图的处理以vue项目为例,当图片加载失败时,默认的样式不太行,可以做一个error处理,示例代码如下: <template><img :src="url" ...
Android中常见的图片加载框架
图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...
跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究
文章目录一.前言二.选择方案 2.1 CSS注意事项三.快速上手 3.1 新建 nvue 页面 3.2 开发 nvue 页面 3.3 调试 nvue 页面四.拓展阅读一.前言在应用uni- ...
J2EE进阶(二十四)JBoss Web和 Tomcat的区别
J2EE进阶(二十四)JBoss Web和 Tomcat的区别在Web2.0的浪潮中,各种页面技术和框架不断涌现,为服务器端的基础架构提出了更高的稳定性和可扩展性的要求.近年来,作为开源中间件的全球 ...

Vue进阶（四十四）：vue 图片加载完成事件

Vue进阶（四十四）：vue 图片加载完成事件相关推荐

最新文章

热门文章