[已解决]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 鱼币

浏览过的版块