使用ant-design中Carousel加載多個iframe的優(yōu)化方法

今天小編給大家分享的是使用ant-design中Carousel加載多個iframe的優(yōu)化方法。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、蒸湘網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

項目中遇到用ant-design 的 Carousel 加載很多個iframe，因為一次生成很多iframe，會使瀏覽器很慢
思路：只在當(dāng)先顯示的項里面加載iframe，其余的都默認加載一個截圖，再切換之前用beforeChange改變 變量idx，把即將要顯示的內(nèi)容由圖片變成視頻
代碼如下

<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的優(yōu)化方法，代碼示例簡單明了，如果在日常工作遇到此問題。通過這篇文章，希望你能有所收獲，更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：使用ant-design中Carousel加載多個iframe的優(yōu)化方法
網(wǎng)站URL：http://muchs.cn/article26/gdeejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)