Add loading effect before vue image loading is completed
This time I will bring you vuepicturesIncrease the loading effect before the loading is completed, and increase the loading effect before the vue image is loaded.What are the precautions, the following is the actual combat Let’s take a look at the case.
is as follows:
<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>The following is pure js code
<!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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Vue implements the progress bar of page loading
Detailed explanation of the use of vue better-scroll scrolling plug-in
The above is the detailed content of Add loading effect before vue image loading is completed. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to implement global loading effect in Vue
Jun 11, 2023 am 09:05 AM
In front-end development, we often have a scenario where the user needs to wait for the data to be loaded during interaction with the web page. At this time, there is usually a loading effect displayed to remind the user to wait. In the Vue framework, it is not difficult to implement a global loading effect. Let’s introduce how to implement it. Step 1: Create a Vue plug-in We can create a Vue plug-in named loading, which can be referenced in all Vue instances. In the plug-in, we need to implement the following two methods: s
Commonly used numpy methods and precautions to increase dimensions
Jan 26, 2024 am 08:38 AM
Numpy is a commonly used scientific computing library in Python, providing a wealth of mathematical functions and powerful array operation functions. In practical applications, sometimes we need to expand or adjust the dimensions of an array. This article will introduce commonly used methods of increasing dimensions in numpy and provide detailed code examples. 1. Use the reshape method. The reshape method in numpy allows us to modify the dimensions of the array without changing the number of elements in the array. The specific usage is as follows: importnumpy
How to find a lost treasure chest in a hollow
Jan 22, 2024 pm 05:30 PM
How to recover the treasure chest lost in the cave in Zero Zone? There are many boxes in this dungeon, but because they are scattered everywhere, many people cannot find them. Now we will share with you how to quickly find the boxes and clear the dungeon. How to complete the task of retrieving the treasure box lost in the hole in the dead zone? You can see the commission post in the rope net; specific analysis: 1. We can first go to the rope net and see the commission post [Retrieve the treasure box lost in the hole] , and then select Send message. 2. After exchange and exchange, you can receive this commissioned task, and then you can start this practice. 3. Then we need to enter the hole to unlock this mission. 4. Then we can accept the commission from the cave thief and get a large number of gear coins. 5. It is necessary to get out of the hole
How to realize the universal safety zone of the safety helmet
Jan 24, 2024 pm 02:36 PM
How to complete the ultimate zero-universal safety helmet? To do this mission, you must take on a prior mission. In fact, you need to go to the old site of the Heiyan construction site and pick up the mission. But how do you complete it? Let’s take a look with the editor below. How to complete the omnipotent helmet in JueZuo 1. Go to the old site of the Black Goose construction site. You need to find Tietou here and then have a conversation with him. 2. After having a conversation, you need to go to the cement bag in the pit. Then you can see three people in charge of helmets here and borrow helmets here. 3. Afterwards, you need to find a cautious worker to have a conversation. After the conversation is completed, return to find the iron head. 4. Finally, have a conversation with Tietou to complete the task. The above information is about how to complete the ultimate zero omnipotent helmet.
How to implement global Loading effect in Vue
Nov 07, 2023 am 09:18 AM
How to implement global Loading effects in Vue In Vue development, implementing global Loading effects is a common requirement. The global Loading effect can give users a good prompt to let them know that the page is loading, improving the user experience. This article will introduce how to implement global Loading effects in Vue and provide specific code examples. Create a global Loading component First, we need to create a global Loading component. This component can be a simple
How to use MongoDB to add, modify, and delete data
Sep 20, 2023 pm 02:53 PM
How to use MongoDB to add, modify, and delete data. MongoDB is a popular open source NoSQL database with high performance, scalability, and flexibility. When using MongoDB to store data, we often need to add, modify, and delete data. The following are specific code examples to implement these functions using MongoDB: Database connection: First, we need to connect to the MongoDB database. In Python, this can be achieved using the pymongo library
Hongmeng version of WeChat adaptation work is about to be completed, Huawei Mate70 may be launched
Aug 23, 2024 pm 09:31 PM
The latest news reports that most of the WeChat adaptation work of Huawei’s pure-blood Hongmeng system HarmonyOSNext has been completed, and the official version will be available to users soon. In addition, in addition to WeChat, other Tencent-based mobile applications are also adapting. WeChat has basically completed most of the adaptation work at this stage. Sources said that WeChat functions such as mini programs still need to wait. If all goes well, when pure-blood Hongmeng officially debuts, users can directly use WeChat. According to Yu Chengdong’s previous statement, Huawei will launch the pure-blood Hongmeng system in the fourth quarter of this year. By then, the Huawei Mate70 series will be launched, and WeChat will also be officially unveiled by then. In addition, according to some reports, the Hongmeng version of WeChat may be a simplified version. This version only contains some core functions of WeChat.
How to add a new column in dedecms?
Mar 14, 2024 pm 01:51 PM
How to add a new column in dedecms? With the rapid development of the Internet, website content management systems have become more and more important. As a powerful and flexible content management system, dedecms is favored by many website developers. In the process of using dedecms to build a website, sometimes we need to add some new columns according to actual needs in order to better organize and manage website content. So, how to add a new column in dedecms? Next, we will introduce you to the specific steps and code examples.
