Javascript 在页面上向下滚动后加载iframe
我有一个基本的HTML页面,它有大约20多个由AdobeEdge动画制作的HTML页面iFrame。每个页面包含一个动画图像,持续约3秒。如何在向下滚动页面查看iFrame时加载/设置iFrame动画?现在它们都在页面加载时加载,除非刷新页面,否则无法看到页面底部的动画 感谢您的帮助 编辑:现在它只是表中的iframes。没有javascript等等,因为我不确定用它实现什么Javascript 在页面上向下滚动后加载iframe,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我有一个基本的HTML页面,它有大约20多个由AdobeEdge动画制作的HTML页面iFrame。每个页面包含一个动画图像,持续约3秒。如何在向下滚动页面查看iFrame时加载/设置iFrame动画?现在它们都在页面加载时加载,除非刷新页面,否则无法看到页面底部的动画 感谢您的帮助 编辑:现在它只是表中的iframes。没有javascript等等,因为我不确定用它实现什么 <table> <tr><td colspan="2"><strong>
<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>
160x600-英语/西班牙语
以下是Edge Animate制作的HTML页面:
<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>
无标题
.edgeLoad-EDGE-10230890{可见性:隐藏;}
AdobeEdge.loadComposition('160X600','EDGE-10230890','{
scaleToFit:“无”,
centerStage:“无”,
minW:“0px”,
maxW:“未定义”,
宽度:“160px”,
高度:“600px”
},{“dom”:{},{“dom”:{});
当设置iframe上的src
属性时,iframe将加载。为了防止它们立即加载,您可以将最终的src
存储为数据属性,然后在视口中设置它(稍后我将介绍):
这将使iframe加载并使其动画运行(假设动画加载到onload
,我很宽泛,因为您没有发布代码)
为了知道iframe何时可见,您可以使用类似的库,它会让您知道某个元素何时在视图中。然后,当查看iframe
时,可以执行上述代码:
if ($('#your-iframe-id').visible(true)) {
// The iframe is visible, run the above code
} else {
// The iframe is NOT visible yet, do nothing
}
当设置了iframe的
src
属性时,iframe将加载。为了防止它们立即加载,您可以将最终的src
存储为数据属性,然后在视口中设置它(稍后我将介绍):
这将使iframe加载并使其动画运行(假设动画加载到onload
,我很宽泛,因为您没有发布代码)
为了知道iframe何时可见,您可以使用类似的库,它会让您知道某个元素何时在视图中。然后,当查看iframe
时,可以执行上述代码:
if ($('#your-iframe-id').visible(true)) {
// The iframe is visible, run the above code
} else {
// The iframe is NOT visible yet, do nothing
}
请发布与您的问题相关的JavaScript/jQuery、CSS和HTML。使用以下任何或所有服务创建演示:、、或片段(位于文本编辑器工具栏上的第7个图标或CTRL+M)。更新帖子以包含我拥有的代码请发布与您的问题相关的JavaScript/jQuery、CSS和HTML。使用以下任何或所有服务创建演示:、、或代码段(位于文本编辑器工具栏上的第7个图标或CTRL+M)。已更新帖子以包含我的代码
if ($('#your-iframe-id').visible(true)) {
// The iframe is visible, run the above code
} else {
// The iframe is NOT visible yet, do nothing
}