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.最後與鐵頭對話就能夠完成任務了。上述資訊就是有關於絕區零萬能的安全帽怎麼完成
如何在Vue中實現全域Loading效果
Nov 07, 2023 am 09:18 AM
如何在Vue中實現全域Loading效果在Vue開發中，實現全域Loading效果是一個常見的需求。全域Loading效果可以給使用者一個良好的提示，讓使用者知道頁面正在載入中，增加使用者的使用體驗。本文將介紹如何在Vue中實現全域Loading效果，並提供具體的程式碼範例。建立全域Loading元件首先，我們需要建立一個全域Loading元件。這個組件可以是一個簡
如何使用MongoDB實現資料的增加、修改、刪除功能
Sep 20, 2023 pm 02:53 PM
如何使用MongoDB實現資料的增加、修改、刪除功能MongoDB是一種流行的開源NoSQL資料庫，具有高效能、可擴展性和靈活性。在使用MongoDB儲存資料時，我們經常需要對資料進行增加、修改和刪除操作。以下是使用MongoDB實作這些功能的具體程式碼範例：資料庫連接：首先，我們需要連接到MongoDB資料庫。在Python中，可以使用pymongo函式庫來實現
鴻蒙版微信適配工作即將完成 華為 Mate70 或首發
Aug 23, 2024 pm 09:31 PM
最新消息報道，華為純血鴻蒙系統HarmonyOSNext的微信適配工作目前已經完成大部分，正式版很快跟用戶見面。此外，除了微信，其他騰訊系的手機應用，也在適配工作。微信現階段基本上完成了大部分適配工作，消息來源稱，小程式等微信功能還需要再等等。如果一切順利，當純血鴻蒙正式登場時，用戶可以直接使用微信。根據先前餘承東的說法，華為將在今年第四季首發純血鴻蒙系統，到時華為Mate70系列上市，想必那時候微信也會正式亮相。另外，根據一些爆料稱，鴻蒙版微信或可能是一個簡化版，這個版本只包含微信的一些核心功能，
如何在dedecms中增加新欄位？
Mar 14, 2024 pm 01:51 PM
如何在dedecms中增加新欄位？隨著網路的快速發展，網站內容管理系統變得越來越重要。而dedecms作為一款功能強大且靈活的內容管理系統，則受到了許多網站開發者的青睞。在使用dedecms建站的過程中，有時候我們需要根據實際需求增加一些新的欄目，以便更好地組織和管理網站內容。那麼，如何在dedecms中增加新欄位呢？接下來將為您介紹具體的操作步驟和程式碼範例
