在页面上滚动后加载iframe [英] Having iframe load after scrolling down on page
问题描述
我有一个基本的HTML页面，其中包含20多个使用Adobe Edge Animate制作的HTML页面的iframe。每个页面包含一个持续约3秒钟的动画图像。当我向下滚动页面以查看它们时，如何加载iframe或加载动画效果？现在他们都加载页面加载，你不能看到页面底部的动画，除非你刷新页面。
任何帮助表示赞赏。
编辑：现在它只是表格中的iframe。没有JavaScript等，因为我不知道该怎么实现。
< table>
< tr>< td colspan =2>< strong> 160x600 - 英文/西班牙文< / strong>< / td>< / tr>
< tr>
< td>< iframe width =160height =600src =2016 / 160x600 / 160x600.html>< / iframe>< / td>
< td>< iframe width =160height =600src =2016 / 160x600Spanish / 160x600Spanish.html>< / iframe>< / td>
< / tr>
< / table>
以下是Edge Animate制作的HTML页面：
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< meta http-equiv =X-UA-Compatiblecontent =IE = Edge/>
< title>无标题< / title>
<！ - Adobe Edge Runtime - >
< script type =text / javascriptcharset =utf-8src =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运行时间结束 - >
< / head>
< body style =margin：0; padding：0;>
< div id =Stageclass =EDGE-10230890>
< / div>
< / body>
src 属性设置。为了防止它们立即加载，可以将最终的 src 作为数据属性存储，然后在视口中进行设置（我将在其中进行设置）： < iframe src =about：blankdata-src =https：// your-url -goes-这里>< / iframe中>
当您准备好使iframe可见时，请执行以下操作：
var iframe = $（'＃your-iframe-id'）; //或class，无论您使用什么
if（iframe.data（'src'））{
iframe.prop（'src'，iframe.data（'src'））。data（'src'，false）;
}
这会使iframe加载并获得动画（假设动画是 onload ，因为您没有发布代码，所以我很宽泛。）
为了知道你的iframe是可见的，你可以使用像 jQuery-visible 这样的库，它可以让你知道何时某个元素在视野中。您可以在 iframe 位于视图中时执行上述代码：
if（$（'＃your-iframe-id'）。visible（true））{
// iframe可见，运行上面的代码
} else {
// The iframe is not visible yet，do nothing
}
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
}
这篇关于在页面上滚动后加载iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
