freemarker中如何嵌入进度条
最近开发中遇到一个问题，一个老项目用的freemarker，然后需求是在页面加载的时候显示一个进度条。但是freemarker的渲染是在后端完成的，不存在加载的过程。如果这个进度条直接写在页面上，会和数据一起展示出来，问问鱼吧的大佬们有没有比较好的解决思路 在Freemarker中嵌入进度条可以通过以下步骤实现：1. 在页面中添加一个div元素，用于显示进度条。
2. 使用JavaScript代码来控制进度条的显示和隐藏。可以使用jQuery等库来简化代码。
3. 在Freemarker模板中添加一个JavaScript代码块，该代码块将在页面加载时执行。在该代码块中，使用Ajax来获取数据并渲染页面，同时在进度条中显示加载进度。
以下是示例代码：
HTML代码：
<div id="progress-bar"></div>
JavaScript代码：
$(document).ready(function() {
// 显示进度条
$('#progress-bar').show();
// 发送Ajax请求获取数据
$.ajax({
url: 'data.json',
success: function(data) {
// 渲染页面
var html = '<ul>';
for (var i = 0; i < data.length; i++) {
html += '<li>' + data[ i] + '</li>';
}
html += '</ul>';
$('#content').html(html);
// 隐藏进度条
$('#progress-bar').hide();
}
});
});
Freemarker模板代码：
<html>
<head>
<title>My Page</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
// JavaScript代码块
});
</script>
</head>
<body>
<div id="progress-bar"></div>
<div id="content"></div>
</body>
</html>
在上面的示例代码中，我们在页面加载时显示进度条，然后使用Ajax请求获取数据并渲染页面。在渲染过程中，我们更新进度条以显示加载进度。最后，在渲染完成后隐藏进度条。 isdkz 发表于 2023-5-17 09:45
在Freemarker中嵌入进度条可以通过以下步骤实现：
1. 在页面中添加一个div元素，用于显示进度条。
这样不可以，我们这边没有用到异步，就是直接model.addAttribute,然后返回一个页面。数据是直接封装好的，您这个方法我之前试过了。效果是进度条一闪页面就出来了 {:7_146:} 程序员最不喜欢的事之一，做进度条 好问题 币 币 没学过“JavaScript”，哎，人生苦短，我用派三。 {:10_277:} {:5_106:} {:10_279:} 狗宁 发表于 2023-5-17 09:49
这样不可以，我们这边没有用到异步，就是直接model.addAttribute,然后返回一个页面。数据是直接封装好的 ...
明白你的问题了。在你的情况下，服务器在发送已经渲染好的HTML到浏览器之前，其实已经完成了所有的处理工作。因此，你无法在服务器端渲染的过程中显示一个进度条。
然而，如果你的页面在浏览器端有一些资源（如图片、脚本等）需要加载，你可以考虑在这些资源加载的过程中显示一个进度条。也就是说，这个进度条的目的并不是表示服务器端渲染的进度，而是表示浏览器加载资源的进度。对于这种情况，你可以使用一些JavaScript库，如Pace.js，来自动检测和显示页面加载的进度。
另外，如果你希望在服务器端渲染的过程中显示进度条，你可能需要改变你的架构，使得服务器渲染成为一个可以被浏览器端跟踪的异步过程。这可能涉及到使用WebSockets或者Server-Sent Events等技术，服务器可以在渲染的过程中将进度信息发送到浏览器端，由浏览器端更新进度条。但是，
对于一个同步的、基于服务器端渲染的架构，这可能需要一定的开发工作，并可能需要你对整个应用的架构进行重构，这可能是一项非常大的工作。
如果服务器端渲染的过程非常快，那么可能实际上并不需要进度条。如果渲染过程慢到足以使用户感到不耐烦，那么可能需要考虑优化你的服务器端代码，或者使用一种可以异步渲染的架构，如使用AJAX或者单页面应用（SPA）。
在当前的情况下，也许你可以考虑的一个折中的解决方案是使用一个假的进度条。这个进度条在页面开始加载时就显示出来，然后慢慢前进，直到页面完全加载完毕。虽然这并不能反映实际的加载进度，但是它可以给用户一种页面正在加载的感觉，可以缓解用户的焦虑感。
这里是一个简单的例子，使用了CSS动画来实现一个假的进度条：
<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
background: lightblue;
height: 5px;
width: 0;
transition: width 2s;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('progress-bar').style.width = '100%';
});
</script>
</head>
<body>
<div id="progress-bar"></div>
<!-- 其他内容 -->
</body>
</html>
这个代码将在页面加载完成时将进度条的宽度设置为100%，产生一种页面加载完成的效果。你可以根据需要调整动画的时长和其他参数。
页:
[1]