Question

我正在构建一个图表工具，它将python中的图表生成为html / css / js，然后使用IFrames将它们加载到仪表板中，这也是使用python代码作为这些图表的展示生成的。

生成的IFrame代码看起来像这样

<div class="grid-item whiteBlock" style="top:360px; left:360px; width:350px; height:350px;">
      <div class="contentBlk">
        <iframe src="charts/Heatmap.html" width="300px" height="300px" frameborder="0" scrolling="no"></iframe>
      </div>   
</div>

<div class="grid-item whiteBlock" style="top:360px; left:720px; width:350px; height:350px;">
      <div class="contentBlk">
        <iframe src="charts/Barchart.html" width="300px" height="300px" frameborder="0" scrolling="no"></iframe>
      </div>  
</div>

这适用于一些图表，但是当我使用大量图表（比如30）时，加载需要很长时间。有时甚至根本不加载。

所以，我的问题是如何能够阻止每个图表同时加载并使仪表板加载更快。有什么方法我可以在开始时只进行前几次加载，并且在滚动时逐渐增加？

Answer 1

您可以在页面加载时通过javascript动态创建iframe，并将其附加到文档

中

使用jQuery，这有效：

<script type="text/javascript">
  $(window).load(function() {
    var f = document.createElement('iframe');
    f.src = url; 
    f.width = 1000; 
    f.height = 500;
    $('body').append(f);
  });
</script>

其中url是某个网址

如何异步加载HTML IFrame？

1 个答案: