这次给大家带来vue图片加载完成前增加loading效果，vue图片加载完成前增加loading效果的注意事项有哪些，下面就是实战案例，一起来看一下。

如下所示：

<template> <img  alt="vue图片加载完成前增加loading效果" ></template><ｓｃｒｉｐｔ> export default {  props: [&#39;src&#39;], // 父组件传过来所需的url  data() {   return {    url: &#39;http://www.86y.org/images/loading.gif&#39; // 先加载loading.gif   }  },  mounted() {   var newImg = new Image()   newImg.src = this.src   newImg.ｏｎｅｒｒｏｒ = () => { // 图片加载错误时的替换图片    newImg.src = &#39;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&#39;   }   newImg.onload = () => { // 图片加载成功后把地址给原来的img    this.url = newImg.src   }  } }</ｓｃｒｉｐｔ>

以下为纯js代码

nbsp;html&gt; <meta> <title>loading</title> <img  alt="vue图片加载完成前增加loading效果" > <ｓｃｒｉｐｔ>  window.onload = () => {   var img = document.querySelector(&#39;#img&#39;);   img.src = &#39;http://www.86y.org/images/loading.gif&#39;; // 先加载loading.gif   var newImg = new Image();   newImg.src = &#39;https://avatars3.githubusercontent.com/u/1?v=3&#39;;   newImg.ｏｎｅｒｒｏｒ = () => { // 图片加载错误时的替换图片    newImg.src = &#39;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&#39;;   }   newImg.onload = () => { // 图片加载成功后把地址给原来的img    img.src = newImg.src   }  } </ｓｃｒｉｐｔ>

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

 vue实现页面加载的进度条

vue better-scroll的滚动插件使用详解

标签： loading图片