这次给大家带来vue图片加载完成前增加loading效果，vue图片加载完成前增加loading效果的注意事项有哪些，下面就是实战案例，一起来看一下。
如下所示：
<template>
<img :src="url">
</template>
<script>
export default {
props: ['src'], // 父组件传过来所需的url
data() {
return {
url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif
}
},
mounted() {
var newimg = new image()
newimg.src = this.src
newimg.onerror = () => { // 图片加载错误时的替换图片
newimg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3a%2f%2fa0.att.hudong.com%2f77%2f31%2f20300542906611142174319458811.jpg'
}
newimg.onload = () => { // 图片加载成功后把地址给原来的img
this.url = newimg.src
}
}
}
</script>
以下为纯js代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>loading</title>
</head>
<body>
<img id="img">
<script>
window.onload = () => {
var img = document.queryselector('#img');
img.src = 'http://www.86y.org/images/loading.gif'; // 先加载loading.gif
var newimg = new image();
newimg.src = 'https://avatars3.githubusercontent.com/u/1?v=3';
newimg.onerror = () => { // 图片加载错误时的替换图片
newimg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3a%2f%2fa0.att.hudong.com%2f77%2f31%2f20300542906611142174319458811.jpg';
}
newimg.onload = () => { // 图片加载成功后把地址给原来的img
img.src = newimg.src
}
}
</script>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue实现页面加载的进度条
vue better-scroll的滚动插件使用详解
以上就是vue图片加载完成前增加loading效果的详细内容。