Tengo un sitio web simple de una página con bootstrap 5 configurado usando Spring Boot con thymeleaf.
En esta página, quiero, por ejemplo, usar la información sobre herramientas de arranque. El problema es que la función para inicializar la información sobre herramientas se activa antes de que el script de arranque haya terminado de cargarse, por lo que habrá un error y la página no se cargará correctamente.
<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>Traté de colocar el script de arranque
pero nada impide que la segunda secuencia de comandos se active antes de que la primera secuencia de comandos haya terminado de cargarse.
He leído las especificaciones de HTML aquí, pero al final no estoy seguro de si la carga del script es realmente el problema.
¿Alguien tiene una idea para prevenir definitivamente este error?
Finalmente resuelto este problema.
Puse todo el código javascript en un archivo js separado. Luego cargo este archivo después del archivo de arranque al final del cuerpo y todo funciona bien.
<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>