溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下所示：
<template>
<img :src="url">
</template>
<script>
export default {
props: ['src'], // 父組件傳過來所需的url
data() {
return {
url: 'https://cache.yisu.com/upload/information/20200622/114/51490.gif' // 先加載loading.gif
}
},
mounted() {
var newImg = new Image()
newImg.src = this.src
newImg.onerror = () => { // 圖片加載錯誤時的替換圖片
newImg.src = 'https://cache.yisu.com/upload/information/20200622/114/51492.html'
}
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 = 'https://cache.yisu.com/upload/information/20200622/114/51490.gif'; // 先加載loading.gif
var newImg = new Image();
newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3';
newImg.onerror = () => { // 圖片加載錯誤時的替換圖片
newImg.src = 'https://cache.yisu.com/upload/information/20200622/114/51492.html';
}
newImg.onload = () => { // 圖片加載成功后把地址給原來的img
img.src = newImg.src
}
}
</script>
</body>
</html>
以上這篇vue實現圖片加載完成前的loading組件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
