如何添加一个javascript加载器，它将在DOM“等待”时始终显示？

Question

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

Answer 1

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

Answer 2

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

Answer 3

从http://www.ajaxload.info/

获取加载图片

添加一个显示进度的div，默认情况下为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();
      }
   });
}