javascript - 如何添加一个始终显示 DOM 处于“等待”状态的 javascript 加载器？

Question

我想为 DOM 加载时创建一个微调器，如下图所示：

Answer 1

我所做的是，页面所做的第一件事是显示微调器，然后使用 window.onload 事件将其删除。

Answer 2

您可以添加一个覆盖窗口的动画 gif，并在文档准备好时将其删除。这将破坏没有启用 javascript 的客户端。

Answer 3

从http://www.ajaxload.info/获取加载图像

添加一个显示进度的 div，默认情况下使用 display:none css

   <div id="progress" style="display:none;">
            <img src="../images/ajax-progress.gif" alt="Loading please wait..." style="display:block; margin-left: auto; margin-right: auto"/>
            <span>Please wait while loading records...</span>
     </div>

在你的 javascript 函数中做这样的事情

function GetData()
{
  //show loading div 
   $('#progress').show();
   $.ajax({
      url: 'ajax/test.html',
      success: function(data) {

      //Hide the progress div if loading data is done
      $('#progress').hide();
      }
   });
}