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

发布于 2025-01-20 18:49:42 字数 1005 浏览 0 评论 0原文

我有一个简单的一页网站，并使用带有胸腺的Spring Boot设置Bootstrap 5。

在此页面上，我希望EG使用Bootstrap Tooltip。问题在于，在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脚本放在

头部部分中
异步属性，
，并带有defer属性的
将属性的组合
直接放在工具提示init脚本之前

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

我读过html spec 在这里，但最后我不确定脚本的加载是否确实是问题。

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

原文

I have a simple one page website with bootstrap 5 set up using spring boot with thymeleaf.

On this page I want e.g. to use the bootstrap tooltip. The problem is that the function to initialize the tooltip fires before the bootstrap script has finished loading so there will be an error and the page will not load correctly.

<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>

I tried to place the bootstrap script

in the head section
with async attribute
with defer attribute
a combination of the attributes
in the body section directly before the tooltip init script

but nothing prevents the second script to fire before the first script has finished loading.

I have read the HTML spec here but in the end I'm not sure if the loading of the script is truly the problem.

Has someone an idea to definitly prevent this error?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青巷忧颜 2025-01-27 18:49:42

最后解决了这个问题。

我将所有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>

Finally solved this problem.

I put all the javascript code in a seperate js-file.
Then I load this file after the bootstrap file at the end of the body and everything works fine.

<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>

回复收藏 0 原文

~没有更多了~