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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JavaScript如何判断对象有某属性
Jul 03 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原创论坛
2006/10/09 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
利用Python进行异常值分析实例代码
2017/12/07 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python实现多人聊天室
2020/03/31 Python
如何对python的字典进行排序
2020/06/19 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
淘宝店铺营销方案
2014/02/13 职场文书
办理房产证委托书
2014/09/18 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
我的长征观后感
2015/06/09 职场文书
开学随笔
2015/08/15 职场文书