使用 HTML 的 Jupyter Notebook Preloader答案

【问题标题】：Jupyter Notebook Preloader using HTML使用 HTML 的 Jupyter Notebook Preloader
【发布时间】：2020-11-04 17:05:53
【问题描述】：

首先，我对 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>
'''))

【问题讨论】：

标签： python html jupyter-notebook jupyter

【解决方案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>
'''))

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

【讨论】：