Having iframe load after scrolling down on page

2019-09-18 04:02发布

站内问答 / JavaScript
1652 1 6

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>

1条回答
SAY GOODBYE
2楼-- · 2019-09-18 04:33

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
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)