Question

有一些关于如何在加载元素时显示加载器的答案。我的问题不同。我想在文档正文加载之前显示加载程序。

我有ajax电话

var url = window.location.origin+"/test.html";
showLoader();
$$.ajax({                                   
   type: "GET",                           
   url: url,                               
   success: function(data)                 
   {                                   
      document.open();                               
      document.write(data);                           
      document.close(); 
      hideLoader();                                                                                        
   }                                       
 });

问题是因为test.html包含一些脚本，这些脚本会延迟文档正文的加载。它会显示空白的空白屏幕，直到未加载脚本并因此呈现文档正文为止。

有什么想法可以在加载文档正文时显示加载器吗？

Answer 1

您可以将静态页面加载器（使用CSS或图像）设置为页面的初始状态，然后通过AJAX加载内容后立即将其覆盖。希望以下示例可以说明这一想法：

// imitating AJAX call for the content
setTimeout(() => {
  document.write('Content loaded')
}, 3000)

.loading {
  position: fixed;
  height: 1em;
  width: 1em;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div class="loading">Loading...</div>

在尚未加载文档正文时显示加载程序

1 个答案: