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入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
Javascript 布尔型分析
2008/12/22 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python语言快速上手学习方法
2018/12/14 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
三维科技面试题
2013/07/27 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
先进集体事迹材料
2014/02/17 职场文书
员工安全责任书范本
2014/07/24 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
赢在执行观后感
2015/06/16 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
导游词之太原天龙山
2020/01/02 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫