今天小编给大家分享的是使用ant-design中Carousel加载多个iframe的优化方法。小编觉得挺实用的，为此分享给大家做个参考。一起跟随小编过来看看吧。

项目中遇到用ant-design 的 Carousel 加载很多个iframe，因为一次生成很多iframe，会使浏览器很慢
思路：只在当先显示的项里面加载iframe，其余的都默认加载一个截图，再切换之前用beforeChange改变 变量idx，把即将要显示的内容由图片变成视频
代码如下

<template> <div class="morevideowarp"> <template v-if="!hasvideo"> <a-carousel :afterChange="afterChange" :beforeChange="beforeChange" arrows dotsClass="slick-dots slick-thumb scrollDivNew"> <!-- 下面的缩略图 --> <a slot="customPaging" slot-scope="props"> <img :src="videoProList[props.i].picUrl" /> </a> <!-- 向左的箭头 --> <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" > <a-icon type="left-circle" /> </div> <!-- 向右的箭头 --> <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" > <a-icon type="right-circle" /> </div> <!-- 主体部分 --> <div v-for="(item,index) in videoProList" :key="index"> <!-- 利用idx与index是否相等，决定渲染的是iframe或者img --> <template v-if="idx===index"><iframe :src="videoUrl(item)"></iframe></template> <template v-else><img :src="item.picUrl" /></template> </div> </a-carousel> </template> <div v-else class="noresult">暂无视频</div> </div></template>

js逻辑部分

methods: { beforeChange (from, to) { // 切换之前把变量idx变成即将要显示的那个项的idx，这样渲染的时候就会渲染iframe，而旧的也会销毁 this.idx = to } }

以上就是使用ant-design中Carousel加载多个iframe的优化方法，代码示例简单明了，如果在日常工作遇到此问题。通过这篇文章，希望你能有所收获，更多详情敬请关注亿速云行业资讯频道！