文章/答案/技术大牛

发布

社区首页 >问答首页 >Thymeleaf加载CSS，但不加载Javascript

问Thymeleaf加载CSS，但不加载Javascript
EN

Stack Overflow用户

提问于 2019-05-18 07:41:34

回答 2查看 180关注 0票数 0

我有一个带有Thymeleaf模板的Spring boot应用程序，它应该加载一个css文件和一个javascript文件。CSS文件加载，但Javascript文件不加载，它甚至不会尝试从服务器获取它。没有对Javascript的HTTP请求，但是对CSS的请求是可见的。我的错误在哪里？

我已经尝试将javascript的链接放在标题中css旁边，但这并没有什么不同。

我的文件夹结构如下：

resources
-- static
---- bootstrap
------ css
---- js

下面是HTML：

<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Website Title</title>
  <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
  <script th:href="@{/js/main.js}" type="text/javascript"></script>
</body>
</html>

没有错误消息，javascript的标记被简单地忽略。

css

spring

spring-boot

thymeleaf

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-30 06:17:58

标记应为

<script th:src[...]>

而不是

<script th:href[...]>

票数 2

Stack Overflow用户

发布于 2019-05-18 08:04:59

您的脚本结束标记不完整。它应该是：

<script th:src="@{/js/main.js}" type="text/javascript"></script>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56196954

复制

预加载JavaScript/CSS但不执行

java ajax flash xml php

好吧，一个方案一个方案来分析一下（要求是不允许执行Javascript和应用CSS，以免消耗系统资源）：

meteoric

2018/11/15

2K0

用JavaScript来加载css、js文件

javascript css document url var

友儿

2023/10/21

2840

css加载慢导致加载瞬间白屏（dom比css加载快导致）

css

2，css样式压缩下，用sass编译一下，放在head顶部，head再用incloud包起来，放在文件夹；

kirin

2020/11/30

2.2K0

JavaScript加载速度

javascript

解决JS加载速度慢的问题传统形式加载js文件 <script type="text/javascript" src="js调用地址"></script> 高速加载js文件 <script type="text/javascript"> /* 请不要删除这段代码，因为这段代码起到了加速JS加载作用 */ document.write("<scr"+"ipt src=\"你的js调用地址"></sc"+"ript>"); </script>

闲花手札

2021/08/24

7420

JavaScript文件加载优化

javascript

企鹅号小编

2018/01/04

1.2K0

javascript加载数据简述

http tcp/ip css html

加载资源的形式输入url（或跳转页面）加载html 加载静态资源：图片，js，css，音视频等加载一个资源的过程浏览器根据DNS服务器得到域名的IP地址向这个IP的机器发送http请求服务器收到，处理并返回http请求浏览器得到返回内容浏览器渲染页面的过程根据HTML结果生成DOM Tree 根据CSS生成CSSOM（CSS Object Model）将DOM和CSSOM整合形成RenderTree 根据RenderTree开始渲染和展示遇到<script>标签时，会执行并阻塞渲染渲染

踏浪

2019/07/31

5450

JavaScript模块循环加载

ecmascript javascript 编程算法缓存

“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。

javascript.shop

2019/09/04

1.1K0

css实现页面加载动画

css 动画

一.代码 <div id="loading"> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在加载中...........</div>

小小咸鱼YwY

2020/08/11

3.8K0

动态加载JS 和 CSS

javascript css

逸鹏

2018/04/10

30.1K0

CSS 3.0实现加载动画

动画

给大家分享一个用CSS 3.0实现加载动画，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 3.0实现加载动画</title> <style> * { margin:

越陌度阡

2021/11/30

6860

JavaScript实现加载中...效果

html html5 javascript

简述 JavaScript实现加载中...效果开始 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum

xlj

2021/07/03

1.2K0

JavaScript实现图片懒加载

data src 浏览器原理

1、将图片真实路径赋值到img标签的data-src属性中，而不是src属性 2、获取img节点距离浏览器顶部的距离，如果小于或等于浏览器窗口的可视高度，那么就将data-src的值赋值到src里去

Javanx

2019/09/04

8650

javascript图片无限懒加载

java 编程算法 html javascript

知识点：for循环语句，DOM概念，元素获取，动态布局，基本算法，节点操作，JQ与JS的关系与区别，JS的重要性，如何学习JS。 html代码： <div id="box"> <ul>  <li></li> <li></li>

IT架构圈

2018/06/01

1.7K0

图片的javascript延时加载

html javascript

在页面很长(超过3屏)且图片又很多时，默认情况下浏览器会加载所有图片，有可能导致第二屏的图片显示出来了，但第一屏的图片还在加载，这种情况最适合用"javascript延时加载"来改善用户体验. 原理： 1.根据图片元素距页面顶部的距离，判断图片自身在第几屏 2.所有图片元素的src值先不设置，改而用其它自定义属性，比如src写成lazy_src(这样浏览器就不会主动加载图片) 3.根据1的判断，如果轮到自己登场了(即到顶部的距离变化了，比如用户拉动滚动条了)，则将lazy_src值赋值为src，这样浏览器就

菩提树下的杨过

2018/01/23

1.1K0

Javascript无阻塞加载方法

其他

看了《高性能JavaScript》的读书笔记几个原则： 1、将脚本放在底部 <link>还是在head中，用以保证在js加载前，能加载出正常显示的页面。 <script>放在</body>前。 2、成组脚本由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。 3、非阻塞脚本等页面完成加载后，再加载js代码。也就是，在window.load事件发出后开始下载代码。（1）defer属性：支持IE4和fierfox3.5更高版本浏

小端

2018/04/11

1.2K0

JavaScript 模块的循环加载

javascript

"循环加载"（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var

ruanyf

2018/04/12

1.4K0

JavaScript实现加载中...效果

javascript html

xlj

2021/07/14

8980

WordPress异步加载JavaScript插件：Async JavaScript

javascript jquery node.js

按惯例，所有JavaScript都放在页面的头部head中，必须等全部JavaScript代码都被下载、解析和执行完后，才能开始呈现页面的内容，对加载很多JavaScript代码的页面来说，会导致页面呈现出现明显示的延迟。我们可以通过为这些JavaScript添加“async”（异步）或“defer“（推迟）属性，加快页面呈现的速度。

星哥玩云

2022/06/11

6440

WordPress异步加载JavaScript插件：Async JavaScript

Android 拦截WebView加载URL，控制其加载CSS、JS资源

其他 https

Hankkin

2018/09/06

3.9K0

5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

css javascript

视频地址：https://www.bilibili.com/video/BV1D5411H7Tc

AlbertYang

2020/12/31

2.3K0

相似问题

Thymeleaf CSS未加载

118

CSP拒绝加载css文件，但不能加载javascript文件

1132

Thymeleaf没有加载css和js

Spring Thymeleaf不加载CSS (xml配置)

CSS文件加载但不活动

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问Thymeleaf加载CSS，但不加载Javascript
EN

回答 2

Stack Overflow用户

Stack Overflow用户

Thymeleaf CSS未加载

CSP拒绝加载css文件，但不能加载javascript文件

Thymeleaf没有加载css和js

Spring Thymeleaf不加载CSS (xml配置)

CSS文件加载但不活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Thymeleaf加载CSS，但不加载JavascriptEN

回答 2

Stack Overflow用户

Stack Overflow用户

Thymeleaf CSS未加载

CSP拒绝加载css文件，但不能加载javascript文件

Thymeleaf没有加载css和js

Spring Thymeleaf不加载CSS (xml配置)

CSS文件加载但不活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Thymeleaf加载CSS，但不加载Javascript
EN