当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现图片加载完成前的loading组件方法

vue实现图片加载完成前的loading组件方法

2018年02月07日  | 移动技术网IT编程  | 我要评论

谢灵环,十大奸臣,长沙望月湖玫瑰园

如下所示：

<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实现图片加载完成前的loading组件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网