快捷導(dǎo)航

vue實(shí)現(xiàn)圖片加載完成前的loading組件方法

更新時間：2018年02月05日 09:30:37 作者：_破敗

下面小編就為大家分享一篇vue實(shí)現(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實(shí)現(xiàn)圖片加載完成前的loading組件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue引入element-ui之后,頁面是空白的問題及解決
這篇文章主要介紹了vue引入element-ui之后，頁面是空白的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
深入了解Vue3組件傳值方式
學(xué)習(xí)過?vue2?的寶子們肯定知道，組件傳值是?vue?項(xiàng)目開發(fā)過程中必不可少的功能場景，在?vue2?里面有很多傳值的方式。今天就來和大家講講Vue3的組件傳值方式，需要的可以參考一下
2022-07-07
Vue實(shí)現(xiàn)動態(tài)控制表格列的顯示和隱藏
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue組件懶加載的操作代碼
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見時對其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友一起看看吧
2023-09-09
Vue組件間通信的實(shí)現(xiàn)方法講解
組件是vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的
2023-01-01
Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue一個動態(tài)添加background-image的實(shí)現(xiàn)
這篇文章主要介紹了Vue一個動態(tài)添加background-image的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue filter 過濾當(dāng)前時間實(shí)現(xiàn)實(shí)時更新效果
這篇文章主要介紹了Vue filter 過濾當(dāng)前時間實(shí)現(xiàn)實(shí)時更新效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
vue解決跨域問題的幾種常用方法(CORS)
在Vue中解決跨域問題有多種方法,今天通過本文給大家介紹幾種比較常見的方法，對vue解決跨域問題感興趣的朋友跟隨小編一起看看吧
2023-05-05
vue圖片上傳組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12