Question

问题是我有一个页面从互联网上带来一些代码，并且网络的连接是上下移动所以页面有时需要很长时间才能呈现，所以我想在上面显示加载图像@PostConstruct调用URL的页面

我试图把这个脚本放在我的模板中

<script>
 $ = jQuery;
$(window).load(function(){
  $('#loading').show();
});
$(document).ready(function() {
 $('#loading').fadeOut(1000);
}); 
</script>

但它仅在@PostConstruct完成后才起作用

任何人都知道如何在@PostConstruct处理时执行此操作？

Answer 1

$(document).ready()和$(window).load()都将在@PostConstruct完成执行后执行。你不能将这些事件用于＆＃34;异步＆＃34;在页面内容仍在加载时显示不同的div。

但是，作为一种解决方法，您可以通过将浏览器添加为<body>标记内的第一个元素，在浏览器仍在构建DOM的过程中呈现加载器div，并防止浏览器通过将页面内容包装在隐藏的div中来呈现页面内容。加载器div将被隐藏，内容div将在DOM完全形成后显示，即@PostConstruct完成执行后

创建一个div来保存加载图像和消息。 确保这个div是<body>标记中的第一个元素。
```
<div id="loading-wrapper">
   Loading...
</div>
```
加载包装器后面的下一个元素应该是页面内容。包裹它一个隐藏的div

<div id="content-wrapper" style="visibility: hidden;">  </div>

确保visibility: hidden内联定义。

完全形成DOM后，隐藏加载器div并显示内容div

$(document).ready(function() { $("#content-wrapper").css("visibility", "visible"); $("#loading-wrapper").css("visibility", "hidden"); });

Answer 2

@PostConstruct正在处理时无法运行任何内容，$(document).ready(function()仅在加载DOM后才能运行，即。在@PostConstruct完成其工作之后，为了解决这个问题，您需要从脚本代码中删除一些行并将其更改为

<script>
 $ = jQuery;
$(document).ready(function() {
 $('#loading').fadeOut(1000);
}); 
</script>

并且让你使用什么链接来调用@postProcessing来通过添加这个脚本来显示加载div

<script>
$(document).ready(function(){
    $('.linkClass').click(function(){
         $("#loading").show(); 
    });
});
</script>

在@PostConstruct处理时加载div

2 个答案: