在出現iframe內容之前加載它

我有一個包含旋轉木馬的頁面。該傳送帶內的內容由八個內聯框架組成。傳送帶工作正常。我的問題是，在每個iframe中，我有一個動畫。在出現iframe內容之前加載它

這些動畫在頁面加載後立即啓動。我需要這些動畫才能在每個動畫的特定iframe出現時啓動。

這裏是我的HTML：

<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>

來源

2017-06-12 AciMatta

所有的iframe初始化它們在頁面加載內容（SRC）。我建議你在iframe變爲活動狀態時刷新src，導致動畫重新開始。

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

發現這個代碼在以下問題：How to refresh an IFrame using Javascript?

來源

2017-06-13 13:56:05

在出現iframe內容之前加載它

回答

相關問題