h5-loading预加载图片

最新推荐文章于 2024-05-16 16:54:07 发布

超可爱亚.

最新推荐文章于 2024-05-16 16:54:07 发布

阅读量544

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_58375506/article/details/128919946

版权

第一步在html

<!-- 循环图片数组进行切图片 在data里定义imgIndex为0  imgArr放图片的数组-->
 <div v-for="(item, index) in imgArr" class="frame-loading"
    :class="imgIndex == index ? 'frame-show ' : 'frame-hide'" :key="index">                    
  <img :src="item" />
 </div>

css
.frame-show {
opacity: 1;
}

.frame-hide {
opacity: 0;
}

第二步

imgTime() {
            setInterval(() => {
                this.imgIndex = this.imgIndex + 1;
                //这里图片有几张写几张
                if (this.imgIndex == 38) {
                    this.imgIndex = 0
                }
            }, 1000 / 16);
        },

第三步
在这里插入图片描述