vue實現(xiàn)圖片加載完成前的loading組件方法
更新時間：2018年02月05日 09:30:37 作者：_破敗
下面小編就為大家分享一篇vue實現(xiàn)圖片加載完成前的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>
以上這篇vue實現(xiàn)圖片加載完成前的loading組件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3簡單封裝input組件和統(tǒng)一表單數(shù)據(jù)詳解
最近有一個需求是很多個表單添加,編輯等操作,會用到很多input輸入框,所以就想把input進行簡單封裝,這篇文章主要給大家介紹了關(guān)于vue3簡單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例
這篇文章主要為大家介紹了vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue-cli3+typescript初體驗小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue在echarts?tooltip中添加點擊事件案例詳解
本文主要介紹了Vue項目中在echarts?tooltip添加點擊事件的案例詳解，代碼具有一定的價值，感興趣的小伙伴可以來學(xué)習(xí)一下2021-11-11
vue函數(shù)input輸入值請求時延遲1.5秒請求問題
這篇文章主要介紹了vue函數(shù)input輸入值請求時延遲1.5秒請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實現(xiàn) 點擊顯示 再點擊隱藏 點擊頁面空白區(qū)域也隱藏效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
vant的Loading加載動畫組件的使用(通過接口拿數(shù)據(jù)時顯示加載狀態(tài))
這篇文章主要介紹了vant的Loading加載動畫組件的使用,通過接口拿數(shù)據(jù)時顯示加載狀態(tài),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了Vue父子組件通訊方式及實現(xiàn)方法，文中通過代碼示例介紹的非常詳細(xì)，對我們的學(xué)習(xí)或工作有一定的幫助，感興趣的同學(xué)可以參考閱讀下2023-06-06
Element實現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06