bootstrap 脚本在工具提示初始化之前尚未完成加载

Question

我有一个简单的单页网站 bootstrap 5 使用 spring boot with thymeleaf 设置。

在此页面上，我想要例如使用 bootstrap 工具提示。问题是初始化工具提示的函数在 bootstrap 脚本完成加载之前触发，因此会出现错误并且页面将无法正确加载。

<head>
  ... // css and meta omitted for brevity

  <script th:src="@{/js/bootstrap.bundle.min.js}" async="true"></script>
  
</head>

<body>

  ... // page content

  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  </script>
</body>

我尝试放置 bootstrap 脚本

在头部
具有异步属性
具有延迟属性
属性组合
在工具提示初始化脚本之前的正文部分

但是没有什么能阻止第二个脚本在第一个脚本完成加载之前触发。

我已经阅读了 HTML 规范 here 但最后我不确定脚本的加载是否真的是问题所在。

有没有人有明确防止此错误的想法？

Answer 1

终于解决了这个问题

我将所有 javascript 代码放在单独的 js-file 中。然后我在主体末尾的 bootstrap 文件之后加载此文件，一切正常。

<head>
  ... //css and meta
</head>

<body>
  ... // page content

  <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
  <script th:src="@{/js/myfunction.js}"></script>

</body>

bootstrap 脚本在工具提示初始化之前尚未完成加载

bootstrap script has not finished loading before the tooltip initialization

javascript

spring

thymeleaf

bootstrap-5