[已解决]freemarker中如何嵌入进度条

狗宁 · 发表于 2023-5-17 09:45:01

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

最近开发中遇到一个问题，一个老项目用的freemarker，然后需求是在页面加载的时候显示一个进度条。但是freemarker的渲染是在后端完成的，不存在加载的过程。如果这个进度条直接写在页面上，会和数据一起展示出来，问问鱼吧的大佬们有没有比较好的解决思路

最佳答案

月排行榜 / 总排行榜

isdkz

2023-5-18 21:08:31

狗宁发表于 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%，产生一种页面加载完成的效果。你可以根据需要调整动画的时长和其他参数。

跳转到最佳答案楼层

isdkz · 发表于 2023-5-17 09:45:53

在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请求获取数据并渲染页面。在渲染过程中，我们更新进度条以显示加载进度。最后，在渲染完成后隐藏进度条。

狗宁 · 发表于 2023-5-17 09:49:29

isdkz 发表于 2023-5-17 09:45
在Freemarker中嵌入进度条可以通过以下步骤实现：

1. 在页面中添加一个div元素，用于显示进度条。

这样不可以，我们这边没有用到异步，就是直接model.addAttribute,然后返回一个页面。数据是直接封装好的，您这个方法我之前试过了。效果是进度条一闪页面就出来了

sfqxx · 发表于 2023-5-17 16:21:30

yinda_peng · 发表于 2023-5-17 16:29:25

程序员最不喜欢的事之一，做进度条

sfqxx_小 · 发表于 2023-5-17 18:47:05

好问题

歌者文明清理员 · 发表于 2023-5-17 19:05:37

Threebody1 · 发表于 2023-5-17 19:05:55

Axiujiu · 发表于 2023-5-17 20:47:06

没学过“JavaScript”，哎，人生苦短，我用派三。

落花盈满绣！ · 发表于 2023-5-17 22:02:35

woshizhangpengp · 发表于 2023-5-18 15:14:09

Thomasssk · 发表于 2023-5-18 15:19:20

isdkz · 发表于 2023-5-18 21:08:31

狗宁发表于 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%，产生一种页面加载完成的效果。你可以根据需要调整动画的时长和其他参数。

账号		自动登录	找回密码
密码			立即注册

[已解决]freemarker中如何嵌入进度条

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币