Load of a iframe content before it appears

Question

I have a page with a carousel. The content inside this carousel is formed by eight iframes. The carousel is working fine. My problem is that inside each iframe, I have an animation.

These animations are starting as soon as the page loads. I need these animations to start only when the specific iframe of each one appears.

Here is my 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>

score 0 · Answer 1 · answered Jun 13 '17 at 13:56

All the iframe initialize their content (src) on page load. I suggest you refresh the src when an iframe becomes active, causing the animation to start again.

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

found this code in following question: How to refresh an IFrame using Javascript?

Load of a iframe content before it appears

1 Answers1