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

2019-11-19 14:24:51

字体：大中小

来源：转载

供稿：网友

如下所示：

<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实现获取一个日期段内每天不同的价格(计算入住总价格)

下一篇：JS设计模式之策略模式概念与用法分析