使用 HTML 的 Jupyter Notebook Preloader

Question

首先，我对 HTML 编程知之甚少，而且几乎只在 python 中工作。

TLDR：我需要一个预加载器，它在我运行笔记本的第一个单元格时启动，并在执行最后一个单元格时消失。

我目前正在处理一个项目，我有一个想法，但无法使其正常工作。

这个想法是我想在运行代码的第一个单元格时添加一个预加载器，然后当最后一个单元格执行时，我想停止将显示所有内容的预加载器。

我之前在将笔记本转换为 HTML 时使用过预加载器，但我从未尝试在笔记本中嵌入预加载器。 我的预加载器代码基于这里的Preloader 。

如果我完全使用这段代码，问题似乎是因为它使用 $(window).load(function()，它会导致一个持久的预加载器不会消失，因为它永远不会识别正在完成加载的窗口。

我已经将上面链接中的代码修改为这个（见下文），但问题是它会立即消失。 有谁知道如何使这项工作？

谢谢！

from IPython.display import HTML,display,Markdown
display(HTML('''
<script>
  jQuery(document).ready(function($) {
    $('#preloader').fadeOut('slow');
  });
</script>

<style type="text/css">
  div#preloader { position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #fff url('https://faviconer.net/preloaders/245/Loading%20progress.gif') no-repeat center center;
  }

</style>

<div id="preloader"></div>
'''))

Answer 1

我找到了一个有效的解决方案，但它并不是我想要的，因为在预加载器运行时输出仍在显示，但它现在可以工作。

NB的第一个单元格：

from IPython.display import HTML,display,Markdown
display(HTML('''
<script>

jQuery(document).ready(function($) {
$('#preloader');
});
</script>

<style type="text/css">
  div#preloader { position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #fff url('https://faviconer.net/preloaders/245/Loading%20progress.gif') no-repeat center center;
  }

</style>

<div id="preloader"></div>
'''))

NB的最后一个单元格：

display(HTML('''
<script>

jQuery(document).ready(function($) {
$('#preloader').hide();
});
</script>
'''))

我正在使用以下内容来隐藏输出，但它实际上也隐藏了预加载器，因此它不起作用。 NB开头：

display(HTML('''<script>
out_show=true; 
function out_toggle() {
    if (out_show){
 $('div.output').hide();
 } else {
 $('div.output').show();
 }
 out_show = !out_show
} 
$( document ).ready(out_toggle);
</script>'''))

NB结束：

display(HTML('''<script>
$( document ).ready(out_toggle);
</script>
'''))

如果你们有更好的解决方案，请随时告诉我:)