vue中如何判断图片是否开始渲染

Question

目前image对象，有

onload
onerror
onabort

三种事件，onload可以判断当前图片是否加载完成，那么在vue中，当img标签的src获取到数据的时候，有可能会先渲染别的图片（比如图片A），然后才渲染某一张图片（比如图片B），那么我如何知道图片B是否开始渲染呢？因为在拿到数据到开始渲染的中间会有一段空白时期，我想给这个空白时期设置一个加载中的图标

------------更新-------------
emm我想详细描述一下具体是哪段时间加一个加载中的图标
就是例如一个页面有5张大图，4张小图，分布在不同的位置
而这些图片，都是由同一个接口返回来的url
同时拿到url之后浏览器同时开始加载这些图片，网速调到很慢就会出现这种情况：

一开始是空白的，然后过了一会儿逐渐加载一点点，从上往下加载图片

先加载了一部分，然后逐渐加载另一部分：

然后我的需求就是想在图片还没开始加载的时候，就放一个加载中的图标，然后当它开始加载的时候（不是onload），就去掉这个加载中图标
，让它不存在空白的那个间隙，有办法实现不

Answer 1

先加加载中图标,onload就去掉不就可以了.

---

浏览器应该是没有支持到这里.

不过如果你是不希望看到逐行加载这个过程,可以选择渐进式(Progressive )的载入模式.

可以让图片由模糊逐渐清晰的加载.

用PS导出图片时,可以注意下选项

Answer 2

DOM 里没有提供，手动做法：

1. 手动创建一个 <img>，用它加载，以当前时间作为起始时间。
2. 加载完成后（onload）在把 src 赋给模版中的 <img>，并利用 v-if 控制它的显示。
3. 期间做你想做的事情

因为会走内存缓存，第二次加载时间可以忽略不计。

Answer 3

<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>

参考：https://www.php.cn/js-tutoria...