interface Web
js tutoriel
Ajouter un effet de chargement avant que le chargement de l'image vue ne soit terminé
Ajouter un effet de chargement avant que le chargement de l'image vue ne soit terminé
Cette fois, je vous apporte vueimagespour ajouter un effet de chargement avant que le chargement ne soit terminé, quelles sont les précautionspour ajouter un effet de chargement avant que l'image de vue ne soit chargée, les suivantes est le combat réel. Jetons un coup d'œil au cas.
ressemble à ceci :
<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>Ce qui suit est du code js pur
<!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>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web php chinois !
Lecture recommandée :
Vue implémente la barre de progression du chargement des pages
Explication détaillée de l'utilisation du plug de défilement de vue better-scroll -dans
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment implémenter l'effet de chargement global dans Vue
Jun 11, 2023 am 09:05 AM
Dans le développement front-end, nous avons souvent un scénario dans lequel l'utilisateur doit attendre que les données soient chargées lors de l'interaction avec la page Web. À ce moment-là, un effet de chargement est généralement affiché pour rappeler à l'utilisateur d'attendre. Dans le framework Vue, il n'est pas difficile d'implémenter un effet de chargement global. Voyons comment l'implémenter. Étape 1 : Créer un plug-in Vue Nous pouvons créer un plug-in Vue nommé chargement, qui peut être référencé dans toutes les instances de Vue. Dans le plug-in, nous devons implémenter les deux méthodes suivantes : s
Méthodes numpy et précautions couramment utilisées pour augmenter les dimensions
Jan 26, 2024 am 08:38 AM
Numpy est une bibliothèque de calcul scientifique couramment utilisée en Python, offrant une multitude de fonctions mathématiques et de puissantes fonctions d'opération de tableau. Dans les applications pratiques, nous devons parfois étendre ou ajuster les dimensions d’un tableau. Cet article présentera les méthodes couramment utilisées pour augmenter les dimensions dans numpy et fournira des exemples de code détaillés. 1. Utilisez la méthode reshape La méthode reshape dans numpy nous permet de modifier les dimensions du tableau sans changer le nombre d'éléments dans le tableau. L'utilisation spécifique est la suivante : importnumpy
Comment retrouver un coffre au trésor perdu dans un creux
Jan 22, 2024 pm 05:30 PM
Comment récupérer le coffre au trésor perdu dans la grotte de Zero Zone ? Il y a de nombreuses boîtes dans ce donjon, mais comme elles sont dispersées partout, de nombreuses personnes ne peuvent pas les trouver. Nous allons maintenant partager avec vous comment trouver rapidement les boîtes et vider le donjon. Comment terminer la tâche de récupération du coffre au trésor perdu dans le trou de la zone morte ? Vous pouvez voir le poste de commission dans le filet de corde ; analyse spécifique : 1. Nous pouvons d'abord aller au filet de corde et voir le poste de commission [Récupérer le coffre au trésor perdu dans le trou] , puis sélectionnez Envoyer un message. 2. Après échange et échange, vous pouvez recevoir cette tâche commandée, puis commencer cette pratique. 3. Ensuite, nous devons entrer dans le trou pour débloquer cette mission. 4. Ensuite, nous pouvons accepter la commission du voleur de grottes et obtenir un grand nombre de pièces d'équipement. 5. Il faut sortir du trou
Comment réaliser la zone de sécurité universelle du casque de sécurité
Jan 24, 2024 pm 02:36 PM
Comment compléter le casque de sécurité ultime zéro-universel ? Pour accomplir cette tâche, vous devez assumer une tâche préalable. En fait, vous devez vous rendre sur l'ancien chantier de construction de Heiyan et assumer la tâche. Jetons un coup d'œil avec l'éditeur ci-dessous. Comment compléter le casque omnipotent dans JueZuo 1. Rendez-vous sur l'ancien site du chantier de construction Black Goose. Vous devez trouver Tietou ici et ensuite avoir une conversation avec lui. 2. Après avoir eu une conversation, vous devez vous rendre au sac de ciment dans la fosse. Ensuite, vous pouvez voir trois personnes chargées des casques ici et emprunter des casques ici. 3. Ensuite, vous devez trouver un travailleur prudent pour avoir une conversation. Une fois la conversation terminée, revenez chercher la tête de fer. 4. Enfin, discutez avec Tietou pour terminer la tâche. Les informations ci-dessus expliquent comment compléter le casque ultime zéro omnipotent.
Comment implémenter l'effet de chargement global dans Vue
Nov 07, 2023 am 09:18 AM
Comment implémenter les effets de chargement globaux dans Vue Dans le développement de Vue, l'implémentation des effets de chargement globaux est une exigence courante. L'effet de chargement global peut donner aux utilisateurs une bonne invite pour leur faire savoir que la page est en cours de chargement, améliorant ainsi l'expérience utilisateur. Cet article expliquera comment implémenter les effets de chargement globaux dans Vue et fournira des exemples de code spécifiques. Créer un composant Loading global Tout d'abord, nous devons créer un composant Loading global. Ce composant peut être un simple
Comment utiliser MongoDB pour ajouter, modifier et supprimer des données
Sep 20, 2023 pm 02:53 PM
Comment utiliser MongoDB pour ajouter, modifier et supprimer des données MongoDB est une base de données NoSQL open source populaire offrant des performances, une évolutivité et une flexibilité élevées. Lorsque nous utilisons MongoDB pour stocker des données, nous devons souvent ajouter, modifier et supprimer des données. Voici des exemples de code spécifiques pour implémenter ces fonctions à l'aide de MongoDB : Connexion à la base de données : Tout d'abord, nous devons nous connecter à la base de données MongoDB. En Python, cela peut être réalisé en utilisant la bibliothèque pymongo
La version Hongmeng du travail d'adaptation de WeChat est sur le point d'être terminée, Huawei Mate70 pourrait être lancé
Aug 23, 2024 pm 09:31 PM
Les dernières nouvelles rapportent que la plupart des travaux d'adaptation de WeChat du système Hongmeng de sang pur HarmonyOSNext de Huawei ont été terminés et que la version officielle sera bientôt disponible pour les utilisateurs. De plus, outre WeChat, d'autres applications mobiles basées sur Tencent s'adaptent également. WeChat a pratiquement terminé la plupart des travaux d'adaptation à ce stade. Des sources ont déclaré que les fonctions WeChat telles que les mini-programmes doivent encore attendre. Si tout se passe bien, lorsque Hongmeng de sang pur fera officiellement ses débuts, les utilisateurs pourront directement utiliser WeChat. Selon la déclaration précédente de Yu Chengdong, Huawei lancera le système Hongmeng de sang pur au quatrième trimestre de cette année. D'ici là, la série Huawei Mate70 sera lancée et WeChat sera également officiellement dévoilé à ce moment-là. De plus, selon certains rapports, la version Hongmeng de WeChat pourrait être une version simplifiée. Cette version ne contient que certaines fonctions essentielles de WeChat.
Comment ajouter une nouvelle colonne dans dedecms ?
Mar 14, 2024 pm 01:51 PM
Comment ajouter une nouvelle colonne dans dedecms ? Avec le développement rapide d’Internet, les systèmes de gestion de contenu de sites Web sont devenus de plus en plus importants. En tant que système de gestion de contenu puissant et flexible, dedecms est privilégié par de nombreux développeurs de sites Web. Dans le processus d'utilisation de dedecms pour créer un site Web, nous devons parfois ajouter de nouvelles colonnes en fonction des besoins réels afin de mieux organiser et gérer le contenu du site Web. Alors, comment ajouter une nouvelle colonne dans dedecms ? Ensuite, nous vous présenterons les étapes spécifiques et des exemples de code.
