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中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci vue图片加载完成前增加loading效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk melaksanakan kesan pemuatan global dalam Vue
Jun 11, 2023 am 09:05 AM
Dalam pembangunan bahagian hadapan, kita sering mempunyai senario di mana pengguna perlu menunggu data dimuatkan semasa interaksi dengan halaman web Pada masa ini, biasanya terdapat kesan pemuatan yang dipaparkan untuk mengingatkan pengguna untuk menunggu. Dalam rangka kerja Vue, tidak sukar untuk melaksanakan kesan pemuatan global Mari perkenalkan cara melaksanakannya. Langkah 1: Cipta pemalam Vue Kita boleh mencipta pemalam Vue bernama loading, yang boleh dirujuk dalam semua kejadian Vue. Dalam pemalam, kita perlu melaksanakan dua kaedah berikut: s
Bagaimana untuk mencari peti harta karun yang hilang di dalam rongga
Jan 22, 2024 pm 05:30 PM
Bagaimana untuk menyelesaikan tugas mendapatkan peti harta karun yang hilang di dalam gua di Zon Sifar? Terdapat banyak kotak di penjara bawah tanah ini, tetapi kerana ia bertaburan di mana-mana, ramai orang tidak dapat mencarinya Sekarang kami akan berkongsi dengan anda cara mencari kotak dengan cepat dan membersihkan penjara bawah tanah. Bagaimana untuk menyelesaikan tugas mendapatkan semula kotak harta karun yang hilang di dalam lubang? hole] , dan kemudian pilih Hantar mesej. 2. Selepas pertukaran dan pertukaran, anda boleh menerima tugas yang ditugaskan ini, dan kemudian anda boleh memulakan amalan ini. 3. Kemudian kita perlu memasuki lubang untuk membuka kunci misi ini. 4. Lepas tu kita boleh terima komisen dari pencuri gua dan dapat duit syiling gear yang banyak. 5. Perlu keluar dari lubang
Kaedah numpy dan langkah berjaga-jaga yang biasa digunakan untuk meningkatkan dimensi
Jan 26, 2024 am 08:38 AM
Numpy ialah perpustakaan pengkomputeran saintifik yang biasa digunakan dalam Python, menyediakan pelbagai fungsi matematik dan fungsi operasi tatasusunan yang berkuasa. Dalam aplikasi praktikal, kadangkala kita perlu mengembangkan atau melaraskan dimensi tatasusunan. Artikel ini akan memperkenalkan kaedah yang biasa digunakan untuk meningkatkan dimensi dalam numpy dan memberikan contoh kod terperinci. 1. Gunakan kaedah bentuk semula Kaedah bentuk semula dalam numpy membolehkan kita mengubah suai dimensi tatasusunan tanpa mengubah bilangan elemen dalam tatasusunan. Penggunaan khusus adalah seperti berikut: importnumpy
Bagaimana untuk merealisasikan zon keselamatan sejagat topi keledar keselamatan
Jan 24, 2024 pm 02:36 PM
Bagaimana untuk melengkapkan topi keledar keselamatan sifar universal yang muktamad? Untuk melakukan tugasan ini, anda mesti mengambil tugas terdahulu Sebenarnya, anda perlu pergi ke tapak lama tapak pembinaan Heiyan dan mengambil tugas itu. Mari lihat dengan editor di bawah. Cara melengkapkan topi keledar mahakuasa dalam JueZuo 1. Pergi ke tapak lama tapak pembinaan Angsa Hitam Anda perlu mencari Tietou di sini dan kemudian berbual dengannya. 2. Selepas berbual, anda perlu pergi ke beg simen dalam lubang kemudian anda boleh melihat tiga orang yang menjaga topi keledar di sini dan meminjam topi keledar di sini. 3. Selepas itu, anda perlu mencari pekerja yang berhati-hati untuk bercakap Selepas perbualan selesai, kembali untuk mencari kepala besi. 4. Akhir sekali, berbual dengan Tietou untuk menyelesaikan tugasan. Maklumat di atas adalah tentang cara melengkapkan topi keledar sifar maha kuasa muktamad.
Bagaimana untuk melaksanakan kesan Pemuatan global dalam Vue
Nov 07, 2023 am 09:18 AM
Cara melaksanakan kesan Pemuatan global dalam pembangunan Vue Dalam Vue, melaksanakan kesan Pemuatan global adalah keperluan biasa. Kesan Pemuatan global boleh memberi pengguna gesaan yang baik untuk memberitahu mereka bahawa halaman sedang dimuatkan, meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara melaksanakan kesan Pemuatan global dalam Vue dan memberikan contoh kod khusus. Cipta komponen Pemuatan global Pertama, kita perlu mencipta komponen Pemuatan global. Komponen ini boleh menjadi mudah
Kerja adaptasi WeChat versi Hongmeng hampir selesai, Huawei Mate70 mungkin dilancarkan
Aug 23, 2024 pm 09:31 PM
Berita terkini melaporkan bahawa kebanyakan kerja penyesuaian WeChat sistem Hongmeng berdarah tulen Huawei HarmonyOSNext telah selesai, dan versi rasmi akan tersedia kepada pengguna tidak lama lagi. Selain itu, sebagai tambahan kepada WeChat, aplikasi mudah alih berasaskan Tencent yang lain turut menyesuaikan diri. WeChat pada asasnya telah menyelesaikan kebanyakan kerja penyesuaian pada peringkat ini Sumber mengatakan bahawa fungsi WeChat seperti program mini masih perlu menunggu. Jika semuanya berjalan lancar, apabila Hongmeng berdarah tulen secara rasminya debut, pengguna boleh terus menggunakan WeChat. Menurut kenyataan Yu Chengdong sebelum ini, Huawei akan melancarkan sistem Hongmeng berdarah tulen pada suku keempat tahun ini, siri Huawei Mate70 akan dilancarkan, dan WeChat juga akan diumumkan secara rasmi pada masa itu. Selain itu, menurut beberapa laporan, versi Hongmeng WeChat mungkin versi ringkas Versi ini hanya mengandungi beberapa fungsi teras WeChat.
Cara menggunakan MongoDB untuk menambah, mengubah suai dan memadam data
Sep 20, 2023 pm 02:53 PM
Cara menggunakan MongoDB untuk menambah, mengubah suai dan memadam data MongoDB ialah pangkalan data NoSQL sumber terbuka yang popular dengan prestasi tinggi, berskala dan fleksibiliti. Apabila menggunakan MongoDB untuk menyimpan data, kita selalunya perlu menambah, mengubah suai dan memadam data. Berikut ialah contoh kod khusus untuk melaksanakan fungsi ini menggunakan MongoDB: Sambungan pangkalan data: Pertama, kita perlu menyambung ke pangkalan data MongoDB. Dalam Python, ini boleh dicapai menggunakan perpustakaan pymongo
Bagaimana untuk menambah lajur baharu dalam dedecms?
Mar 14, 2024 pm 01:51 PM
Bagaimana untuk menambah lajur baharu dalam dedecms? Dengan perkembangan pesat Internet, sistem pengurusan kandungan laman web telah menjadi semakin penting. Sebagai sistem pengurusan kandungan yang berkuasa dan fleksibel, dedecms digemari oleh banyak pembangun laman web. Dalam proses menggunakan dedecms untuk membina laman web, kadangkala kita perlu menambah beberapa lajur baharu mengikut keperluan sebenar untuk mengatur dan mengurus kandungan laman web dengan lebih baik. Jadi, bagaimana untuk menambah lajur baharu dalam dedecms? Seterusnya, kami akan memperkenalkan anda kepada langkah dan contoh kod khusus.
