Having iframe load after scrolling down on page

I have a basic HTML page that has about 20+ iframes of HTML pages that was made with Adobe Edge Animate. Each page contains one animated image that lasts about 3 seconds. How can I have the iframes load/animate as I scroll down the page to view them? Right now they all load on page load and you can't see the ones at the bottom of the page animate unless you refresh the page.

Any help is appreciated.

Edit: Right now it is just iframes inside a table. No javascript etc because I'm not sure what to implement with that.

<table>
<tr><td colspan="2"><strong>160x600 - English/Spanish</strong></td></tr>
<tr>
<td><iframe width="160" height="600" src="2016/160x600/160x600.html"></iframe></td>
<td><iframe width="160" height="600" src="2016/160x600Spanish/160x600Spanish.html"></iframe></td>
</tr>
</table>

Here is the HTML pages made by Edge Animate:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>
    <style>
        .edgeLoad-EDGE-10230890 { visibility:hidden; }
    </style>
<script>
   AdobeEdge.loadComposition('160X600', 'EDGE-10230890', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "160px",
    height: "600px"
}, {"dom":{}}, {"dom":{}});
</script>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
    <div id="Stage" class="EDGE-10230890">
    </div>
</body>

Iframes load when the src property on them is set. In order to prevent them from loading immediately, you can store the eventual src as a data attribute, and then set it when it is in the viewport (which I will get to in a bit):

<iframe src="about:blank" data-src="https://your-url-goes-here"></iframe>

When you're ready to make the iframe visible, do something like:

var iframe=$('#your-iframe-id');//or class, whatever you are using

if (iframe.data('src')){
    iframe.prop('src', iframe.data('src')).data('src', false);
}

This will make the iframe load and get its animation going (assuming the animation goes onload, I am being broad because you didn't post code).

In order to know when your iframe is visible, you can use a library like jQuery-visible which will let you know when a certain element is in view. You can then execute the above code when the iframe is in view:

if ($('#your-iframe-id').visible(true)) {
  // The iframe is visible, run the above code
} else {
  // The iframe is NOT visible yet, do nothing
}

Having iframe load after scrolling down on page

问题:

回答1:

收藏的人(0)

Having iframe load after scrolling down on page

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮