在执行脚本之前等待 Jinja 完全完成页面渲染

Question

是否可以在执行某个脚本之前等待Jinja2 完成插入所有模板元素？我正在尝试在页面上使用KaTeX 呈现一些数学，该页面还包含一堆模板块。但是，数学是在所有模板块被 Jinja2 渲染之前渲染的，所以这些块中的任何数学都不会渲染。

我可以设置一个超时时间，比如 5 秒，然后执行渲染脚本（这可行），但我宁愿使用更优雅的解决方案。按照指示在<script> 标签内使用defer here 什么都不做，也没有

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>

event 是什么告诉浏览器模板引擎如 Jinja2 已经完成工作？肯定不是DOMContentLoaded，基于以上。

编辑

Here 是使用A+ LMS 实施的示例课程。麻烦的模板可以在文件夹_templates 中找到。默认模板使用 MathJax，但由于那个特定的库有一些烦人的特性，例如当需要渲染大量数学时速度很慢，所以我决定改用 KaTeX。这是我的模板版本：

{% extends "aplus/layout.html" %}

{% block extrahead %}

<!--  MathJax (LaTex math)
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" data-aplus></script>
 -->

<!--  KaTeX (LaTeX math) -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" data-aplus>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"  onload="console.log('Hello, this is KaTeX!');" data-aplus></script>
  <script data-aplus>
    function render_katex() {
      if (window.katex) {
          renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
          );
        console.log("Math rendered.");
      } else {
        console.log("KaTeX not loaded.")
      };
    };
  </script>

<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="setTimeout(render_katex,300);" data-aplus></script>


<!-- Custom course styles -->
<link rel="stylesheet"
      href="{{ pathto('_static/course.css', 1) }}"
      type="text/css"
      data-aplus />

<link rel="stylesheet"
      href="{{ pathto('_static/active_element.css', 1) }}"
      type="text/css"
      data-aplus />

{% endblock %}

编辑 2

A link 到 Pastebin 页面的完整源代码。

Answer 1

好的，所以我得出的结论是，最好的选择是简单地等待模板通过 Jinja2。一个人应该等多久？嗯，这取决于一个页面上有多少练习：

<!--  KaTeX (LaTeX math) -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" data-aplus>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"  onload="console.log('Hello, this is KaTeX!');" data-aplus></script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" data-aplus></script>

<script data-aplus>
  document.addEventListener("DOMContentLoaded", function() {

    const n_of_exercises = $(".exercise").length;
    // Using "let" here so that math would render also the first time a page is loaded
    const ms = 300;
    const render_time = n_of_exercises * ms;
    const minimum_render_time = 1200;

    if (render_time >= minimum_render_time) {

      setTimeout(function() {
        renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
        );
      }, render_time);

    } else {

      setTimeout(function() {
        renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
        );
      }, minimum_render_time);

    };

    console.log("Number of .exercise divs:" + n_of_exercises);
    console.log("Render time:" + render_time);


  });
</script>

事实证明，无论页面上有多少练习，事情发生仍然需要一些最少的时间。这就是指定minimum_render_time 的原因。这仅在此特定页面上进行了测试，因此将来可能需要稍微移动值。