vue实现图片加载完成前的loading组件

最新推荐文章于 2025-06-27 16:42:27 发布

_破败

最新推荐文章于 2025-06-27 16:42:27 发布

阅读量2.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue loading 图片加载图片组件 js

本文链接：https://blog.youkuaiyun.com/m0_37842988/article/details/62044614

vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了一个使用Vue和JavaScript实现的图片加载完成前的Loading组件。通过先加载loading.gif，然后利用Image对象监听图片加载状态，实现图片加载错误时的替换和加载成功后的无缝切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人新开个人博客，后期所有文章只在博客中更新！

<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>