title: Having iframe load after scrolling down on page
body: <p>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.</p>
  
  <p>Any help is appreciated.  </p>
  
  <p>Edit: Right now it is just iframes inside a table. No javascript etc because I'm not sure what to implement with that.</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;td colspan="2"&gt;&lt;strong&gt;160x600 - English/Spanish&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;iframe width="160" height="600" src="2016/160x600/160x600.html"&gt;&lt;/iframe&gt;&lt;/td&gt;
  &lt;td&gt;&lt;iframe width="160" height="600" src="2016/160x600Spanish/160x600Spanish.html"&gt;&lt;/iframe&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the HTML pages made by Edge Animate:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"/&gt;
      &lt;title&gt;Untitled&lt;/title&gt;
  &lt;!--Adobe Edge Runtime--&gt;
      &lt;script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          .edgeLoad-EDGE-10230890 { visibility:hidden; }
      &lt;/style&gt;
  &lt;script&gt;
     AdobeEdge.loadComposition('160X600', 'EDGE-10230890', {
      scaleToFit: "none",
      centerStage: "none",
      minW: "0px",
      maxW: "undefined",
      width: "160px",
      height: "600px"
  }, {"dom":{}}, {"dom":{}});
  &lt;/script&gt;
  &lt;!--Adobe Edge Runtime End--&gt;
  
  &lt;/head&gt;
  &lt;body style="margin:0;padding:0;"&gt;
      &lt;div id="Stage" class="EDGE-10230890"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>