iframeコンテンツが表示される前にロードされています

Question

カルーセル付きのページがあります。このカルーセル内のコンテンツは、8つのiframeによって形成されます。カルーセルは正常に動作しています。私の問題は、各iframe内にアニメーションがあることです。

これらのアニメーションは、ページが読み込まれるとすぐに開始されます。 これらのアニメーションは、それぞれの特定のiframeが表示されている場合にのみ開始する必要があります。

<div class="container"> 
    <div class="row"> 
     <div id="carouselIframe" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators carousel-style"> 
       <li data-target="#carouselIframe" data-slide-to="0" class="active"></li> 
       <li data-target="#carouselIframe" data-slide-to="1"></li> 
       <li data-target="#carouselIframe" data-slide-to="2"></li> 
       <li data-target="#carouselIframe" data-slide-to="3"></li> 
       <li data-target="#carouselIframe" data-slide-to="4"></li> 
       <li data-target="#carouselIframe" data-slide-to="5"></li> 
       <li data-target="#carouselIframe" data-slide-to="6"></li> 
       <li data-target="#carouselIframe" data-slide-to="7"></li> 
      </ol> 

      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <iframe width="1128" height="475" src="pages/page1/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page2/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page3/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page4/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page5/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page6/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page7/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <div class="item"> 
        <iframe width="1128" height="475" src="pages/page8/index.html" frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

すべてのiframeがページの読み込み時にそのコンテンツ（SRC）を初期化：

は、ここに私のHTMLです。 iframeがアクティブになったときにsrcを更新してアニメーションを再開させることをお勧めします。 How to refresh an IFrame using Javascript?

：

var iframe = document.getElementById('youriframe'); iframe.src = iframe.src;

は、次の質問でこのコードを見つけました