解决在vue中tab切换图片，gif格式的图片停在最后一帧的问题

当切换tab标签页面的时候，页面文字内容已经显示出来了，gif格式的图片还显示上一帧的内容，等1s后显示当前的gif动画

解决方法:

html中给img动态绑定class样式，图片加载之前先隐藏图片，加载完成然后显示出来

html代码：   

<div class="tabBox">

      <ul class="tabBar">

        <li

          v-for="(item, index) in tablist"

          :key="item.title"

          :class="tabCurIdx === index ? 'on' : ''"

          @click="handleTab(index)"

        >

          {{ item.title }}

        </li>

      </ul>

      <div class="tabContent">

        <img

            :src="tablist[tabCurIdx].img"

            :class="{ loaded: imageLoaded }"

          />

      </div>

    </div>

js 代码：

const tabCurIdx = ref(0);

const imageLoaded = ref(true);

//点击tab

const handleTab = (index: number) => {

  tabCurIdx.value = index;

  imageLoaded.value = false; // 在切换前设置为未加载状态

  const img = new Image();

  img.src = tablist[tabCurIdx.value].img;

  img.onload = () => {

    imageLoaded.value = true; // 图片加载完成后设置为已加载状态

  };

};

css代码

    /* 在图片加载前隐藏 */

      img:not(.loaded) {

        display: none;

      }

      /* 图片加载后显示 */

      img.loaded {

        display: block;

      }