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 相关文章推荐
jquery 插件开发方法小结
Oct 23 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JS实现select选中option触发事件操作示例
Jul 13 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php桥接模式应用案例分析
2019/10/23 PHP
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python 通配符删除文件的实例
2018/04/24 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
求职信范文怎么写
2014/01/29 职场文书
工程建设实施方案
2014/03/14 职场文书
安全协议书范本
2014/04/21 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
Django中celery的使用项目实例
2022/07/07 Python