vue图片加载完成前增加loading效果
这次给大家带来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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是vue图片加载完成前增加loading效果的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Vue中如何实现全局loading效果
Jun 11, 2023 am 09:05 AM
在前端开发中，我们经常会有一种场景：用户在与网页交互过程中需要等待数据的加载，此时通常会有一个loading效果显示，提醒用户等待。在Vue框架中，实现一个全局loading效果并不困难，下面我们来介绍一下如何实现。第一步：创建Vue插件我们可以创建一个名为loading的Vue插件，该插件可以在所有的Vue实例中引用。在插件中，我们需要实现以下两个方法：s
如何在空洞中找回遗失的宝箱
Jan 22, 2024 pm 05:30 PM
绝区零找回遗失在空洞中的宝箱怎么完成呢？这个副本里的箱子很多，但是因为散落在各处，很多人都找不到，下面我们就和你们一起分享一下如何快速找到箱子通关副本。绝区零找回遗失在空洞中的宝箱怎么完成在绳网中看到委托贴子；具体分析：1、我们可以先去绳网中看到委托贴子【找回遗失在空洞中的宝箱】，然后选择发送信息。2、交流兑换以后就可以去领取这个委托任务了，然后就可以开启这个做法了。3、然后需要我们进入空洞就可以解锁这个任务了呢。4、然后我们就可以接取盗洞客的委托，还可以得到很多数量的齿轮硬币。5、出空洞当中需
常用的numpy方法和注意事项来增加维度
Jan 26, 2024 am 08:38 AM
numpy是Python中常用的科学计算库，提供了丰富的数学函数和强大的数组操作功能。在实际应用中，有时我们需要对数组进行维度的扩展或调整。本文将介绍numpy中常用的增加维度的方法，并提供详细的代码示例。一、使用reshape方法numpy中的reshape方法允许我们将数组的维度进行修改，而不改变数组的元素个数。具体使用方法如下：importnumpy
安全帽的万能绝区如何实现
Jan 24, 2024 pm 02:36 PM
绝区零万能的安全帽怎么完成呢？要做这个任务，必须要接取一个先行任务，其实就是去到黑燕工地的旧址，然后接取任务，但是到底要怎么做才能完成？下面就和小编一起看看吧。绝区零万能的安全帽怎么完成1、前往黑雁工地旧址的位置处，需要在i这里找到铁头然后就是与他进行对话。2、进行对话之后需要前往坑中的水泥袋旁边，之后就能够在这里看到三个负责安全帽的人，在这里借安全帽。3、之后需要找到谨慎的工人进行对话，对话完成后返回寻找铁头。4、最后与铁头进行对话就能够完成任务了。上述信息就是有关于绝区零万能的安全帽怎么完成
如何使用MongoDB实现数据的增加、修改、删除功能
Sep 20, 2023 pm 02:53 PM
如何使用MongoDB实现数据的增加、修改、删除功能MongoDB是一种流行的开源NoSQL数据库，具有高性能、可伸缩性和灵活性。在使用MongoDB存储数据时，我们经常需要对数据进行增加、修改和删除操作。以下是使用MongoDB实现这些功能的具体代码示例：数据库连接：首先，我们需要连接到MongoDB数据库。在Python中，可以使用pymongo库来实现
如何在Vue中实现全局Loading效果
Nov 07, 2023 am 09:18 AM
如何在Vue中实现全局Loading效果在Vue开发中，实现全局Loading效果是一个常见的需求。全局Loading效果可以给用户一个良好的提示，让用户知道页面正在加载中，增加用户的使用体验。本文将介绍如何在Vue中实现全局Loading效果，并提供具体的代码示例。创建全局Loading组件首先，我们需要创建一个全局Loading组件。这个组件可以是一个简
鸿蒙版微信适配工作即将完成 华为 Mate70 或首发
Aug 23, 2024 pm 09:31 PM
最新消息报道，华为纯血鸿蒙系统HarmonyOSNext的微信适配工作目前已经完成大部分，正式版很快跟用户见面。此外，除了微信，其他腾讯系的手机应用，也在适配工作。微信现阶段基本完成了大部分适配工作，消息源称，小程序等微信功能还需要再等等。如果一切顺利，纯血鸿蒙正式登场时，用户可以直接用上微信。按照此前余承东的说法，华为将在今年第四季度首发纯血鸿蒙系统，到时华为Mate70系列上市，想必那时候微信也会正式亮相。另外，根据一些爆料称，鸿蒙版微信或可能是一个简化版，这个版本仅包含微信的一些核心功能，
PPT文档时增加撤消步数的操作方法
Mar 26, 2024 pm 02:30 PM
1、运行PPT软件。2、点击左上角的【文件】选项卡。3、在文件选项卡点击左侧的【选项】。4、点击PowerPoint选项窗口左侧的【高级】。5、在高级选项卡中，输入你需要的撤消步数。6、设置完成后点击【确定】。现在PowerPoint软件就会为你记录你设置的步数了。注意不同版本的Office进入选项设置的方式略有不同。
