网页图片按顺序加载显示

<template>
<div style="padding:20px">
  <div class="home" style="padding:20px">
    <img id="img" width="360">
  </div>
  <template v-for="(item, index) in arrayImage">
    <div style="display:inline-block; width: 300px; height: 250px; border:1px solid red;">
      <template v-if="isShowImg(item, index) && item.isShow">
        <img :src="item.src" width="200" height="200"/>
      </template>
      <template v-else>
        图片加载中
      </template>
    </div>
  </template>
</div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return({
      arrayImage:[
      {
        src: 'http://good1230.com/templates/test_img/6.png',
        isShow:false,
      },
      {
        src: 'http://good1230.com/templates/test_img/1.jpg',
        isShow:false,
      },
      {
        src: 'http://good1230.com/templates/test_img/2.jpg',
        isShow:false,
      },
      {
        src: 'http://good1230.com/templates/test_img/3.png',
        isShow:false,
      },
      {
        src: 'http://good1230.com/templates/test_img/4.png',
        isShow:false,
      },
      {
        src: 'http://good1230.com/templates/test_img/5.png',
        isShow:false,
      },
      ]
    })
  },
  created:function(){
    this.arrayImage.map((element, index) => {
      let images = new Array()
      images[index] = new Image();
        images[index].onload = () => {
            element.isShow = true
          }

      images[index].src = element.src;
    });

  },
  computed:{
    isShowImg(){
      return (item, index) => {
        if(index === 0){
          return item.isShow
        }
        if(index > 0){
          const newArray = this.arrayImage.filter((x, i) => i < index)
          const isShow = newArray.every(x => x.isShow == true)
          return isShow
        }
      }
    }
  }
}
</script>