下面我就为大家分享一篇vue实现图片加载完成前的loading组件，具有很好的参考价值，希望对大家有所帮助。
如下所示：
- @@##@@ export default { props: ['src'], // 父组件传过来所需的url data() { return { url: 'D:pic/2025-03-31/https://cdn.chuangxiangniao.com/2025/04/20250401084107376.gif' // 先加载https://cdn.chuangxiangniao.com/2025/04/20250401084107376.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 } } }
登录后复制
以下为纯js代码
- nbsp;html>
<span class="pln">loading</span> @@##@@ window.onload = () => { var img = document.querySelector('#img'); img.src = 'D:pic/2025-03-31/https://cdn.chuangxiangniao.com/2025/04/20250401084107376.gif'; // 先加载https://cdn.chuangxiangniao.com/2025/04/20250401084107376.gif var newImg = new Image(); newImg.src = 'D:pic/2025-03-31/https://cdn.chuangxiangniao.com/2025/04/20250401004106943.png 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 } }
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
立即学习“前端免费学习笔记（深入）”；
如何实现ajax前台后台跨域请求
如何实现ajax前台后台跨域请求
如何实现ajax前台后台跨域请求
以上就是在vue中如何实现图片loading组件的详细内容，更多请关注【创想鸟】其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
