首頁 > 文章 > web前端 > 在vue中如何實作圖片loading元件

在vue中如何實作圖片loading元件

亚连原創: 2018-06-07 16:45:572046瀏覽

下面我就為大家分享一篇vue實作圖片載入完成前的loading元件，具有很好的參考價值，希望對大家有幫助。

如下：

<template>
 <img :src="url">
</template>
<script>
 export default {
  props: [&#39;src&#39;], // 父组件传过来所需的url
  data() {
   return {
    url: &#39;http://www.86y.org/images/loading.gif&#39; // 先加载loading.gif
   }
  },
  mounted() {
   var newImg = new Image()
   newImg.src = this.src
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;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&#39;
   }
   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(&#39;#img&#39;);
   img.src = &#39;http://www.86y.org/images/loading.gif&#39;; // 先加载loading.gif
   var newImg = new Image();
   newImg.src = &#39;https://avatars3.githubusercontent.com/u/1?v=3&#39;;
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;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&#39;;
   }
   newImg.onload = () => { // 图片加载成功后把地址给原来的img
    img.src = newImg.src
   }
  }
 </script>
</body>
</html>

上面是我整理給大家的，希望未來會對大家有幫助。

如何實作ajax前台後台跨網域請求

自訂ajax支援跨網域元件（詳細教學）

透過微信小程式如何實作驗證碼取得倒數計時效果#

以上是在vue中如何實作圖片loading元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript該如何實現獲取日期段內每天不同的價格下一篇：javascript該如何實現獲取日期段內每天不同的價格

看更多