在出现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内容之前加载它

回答

相关问题