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


Posted in Javascript onFebruary 05, 2018

如下所示:

<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组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 #Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 #Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 #Javascript
javascript实现最长公共子序列实例代码
Feb 05 #Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 #Javascript
基于vue 动态加载图片src的解决方法
Feb 05 #Javascript
vue2.0 datepicker使用方法
Feb 04 #Javascript
You might like
php实现统计邮件大小的方法
2013/08/06 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
python实现k-means聚类算法
2018/02/23 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
超简单的Python HTTP服务
2019/07/22 Python
python多线程同步之文件读写控制
2021/02/25 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
项目经理的岗位职责
2013/11/23 职场文书
六十岁生日答谢词
2014/01/10 职场文书
精彩自我鉴定
2014/01/16 职场文书
生日宴会主持词
2014/03/20 职场文书
党建工作先进材料
2014/05/02 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
《叶问2》观后感
2015/06/15 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
浅谈Redis的几个过期策略
2021/05/27 Redis