我有一个简单的一页网站，带有bootstrap 5，使用带有thymelaf的spring-boot设置。
在这个页面上，我想例如使用引导工具提示。问题是，初始化工具提示的函数在引导脚本完成加载之前就会触发，因此会出现错误，页面将无法正确加载。
<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>
我试图放置引导脚本
- 在头部
- 具有async属性
- 具有defer属性
- 属性的组合
- 在工具提示init脚本之前的正文部分
但没有任何东西可以阻止在第一个脚本完成加载之前启动第二个脚本。
我已经阅读了这里的HTML规范，但最后我不确定脚本的加载是否真的是问题所在。
有人有明确防止这种错误的想法吗？
最终解决了这个问题。
我把所有的javascript代码放在一个单独的js文件中。然后我在正文末尾的引导文件之后加载这个文件，一切都很好。
<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>