如何在单击事件上调用 ajax 时显示 CSS 加载答案

【问题标题】：how to show CSS loading while calling ajax on click event如何在单击事件上调用 ajax 时显示 CSS 加载
【发布时间】：2018-12-07 16:01:37
【问题描述】：

我的 html 表中有下拉按钮，单击 link1 时它有 2 个链接我正在转发到一个新页面，我正在其中进行 ajax 调用以在 HTML 表中显示数据，但该数据很大数量所以我想要实现的是显示一个 css 加载器，直到数据完全加载

这是我的代码，其中包含下拉按钮和 css 加载器。我想要做的是点击我想显示加载器的链接并在后台显示 HTML 表格，这样在加载新页面之前没有人可以点击或编辑表格

 var currentlyClickedOutlet = "";
	    var currentlyClickedBilldate="";
	    $(document).ready(function (){
	      $dropdown = $("#contextMenu");
	      $(".actionButton").click(function() {
	        //move dropdown menu
	        $(this).after($dropdown);
	        //update links
	        $(this).dropdown();
	
	         currentlyClickedOutlet = $(this).attr("data-place");
	        currentlyClickedBilldate = $(this).attr("data-plac"); 
	        
	      });
      
  
      $('.loader').hide();
				 
				 $('.link1').click(function (e) {
				  
				   $('.loader').show();
				 });
    
    

    
     
    });

    data = [
            {
                "amount": 476426,
                "billdate": "2018-09-01",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 92141,
                "billdate": "2018-09-01",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 115313,
                "billdate": "2018-09-01",
                "outlet": "KOLAR"
              },
              {
                "amount": 511153,
                "billdate": "2018-09-02",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 115704,
                "billdate": "2018-09-02",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 83597,
                "billdate": "2018-09-02",
                "outlet": "KOLAR"
              },
              {
                "amount": 167421,
                "billdate": "2018-09-03",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 53775,
                "billdate": "2018-09-03",
                "outlet": "KOLAR"
              },
              {
                "amount": 269712,
                "billdate": "2018-09-04",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 58850,
                "billdate": "2018-09-04",
                "outlet": "MALLESHWARAM"
              },
              {
                "amount": 82999,
                "billdate": "2018-09-04",
                "outlet": "KOLAR"
              }
            ]

    let formatData = function(data) {

      let billdates = [];
      let outlets = [];
      data.forEach(element => {
        if (billdates.indexOf(element.billdate) == -1) {
          billdates.push(element.billdate);
        }
        if (outlets.indexOf(element.outlet) == -1) {
          outlets.push(element.outlet);
        }
      });
      return {
        data: data,
        billdates: billdates,
        outlets: outlets,

      };
    };



    let renderTable = function(data, divId, filterdata) {
      billdates = data.billdates;
      outlets = data.outlets;
      data = data.data;
      let tbl = document.getElementById(divId);
      let table = document.createElement("table");
      let thead = document.createElement("thead");
      let headerRow = document.createElement("tr");
      let th = document.createElement("th");
      th.innerHTML = "Bill_____Date";
      th.classList.add("text-center");
      headerRow.appendChild(th);
      let grandTotal = 0;
      let outletWiseTotal = {};
      th = document.createElement("th");
      th.innerHTML = "Total1";
      th.classList.add("text-center");
      headerRow.appendChild(th);

      outlets.forEach(element => {
        th = document.createElement("th");
        th.innerHTML = element;
        th.classList.add("text-center");
        headerRow.appendChild(th);
        outletWiseTotal[element] = 0;
        data.forEach(el => {
          if (el.outlet == element) {
            outletWiseTotal[element] += parseInt(el.amount);
          }
        });
        grandTotal += outletWiseTotal[element];
      });


      thead.appendChild(headerRow);
      headerRow = document.createElement("tr");
      th = document.createElement("th");
      th.innerHTML = "Total";
      th.classList.add("text-center");

      headerRow.appendChild(th);

      outlets.forEach(element => {
        th = document.createElement("th");
        th.innerHTML = outletWiseTotal[element];
        th.classList.add("text-right"); 
        headerRow.appendChild(th);
      });
    
      th = document.createElement("th");
      th.innerHTML = grandTotal;
      th.classList.add("text-right"); // grand total
      
      headerRow.insertBefore(th, headerRow.children[1]);
      thead.appendChild(headerRow);
      table.appendChild(thead);

      let tbody = document.createElement("tbody");
     
      billdates.forEach(element => {
        let row = document.createElement("tr");
        td = document.createElement("td");
        td.innerHTML = element;
        row.appendChild(td);
        let total = 0;
        
        outlets.forEach(outlet => {
          let el = 0;
          data.forEach(d => {
            if (d.billdate == element && d.outlet == outlet) {
              total += parseInt(d.amount);
              el = d.amount;
            }
          });
         



          td = document.createElement("td");
          a = document.createElement("a");
         
          td.classList.add("text-right");
          td.classList.add("dropdown");
          a.classList.add("btn");
          a.classList.add("btn-secondary");
          a.classList.add("actionButton");
          a.classList.add("btn")
          a.classList.add("btn-secondary");
          a.classList.add("dropdown-toggle");
          a.classList.add("dropdown-toggle-split");
         
          
         /*  a.classList.add("text-center"); */

          a.setAttribute("data-place", outlet);
          a.setAttribute("data-plac", element);
         
          
        
          a.setAttribute("data-toggle", "dropdown");
          a.innerHTML = el;
          td.appendChild(a); 

          row.appendChild(td);



          
        });
        
       
        td = document.createElement("td");
        td.innerHTML = total;
        td.classList.add("text-right"); 
       
        row.insertBefore(td, row.children[1]);
        tbody.appendChild(row);

      });

      table.appendChild(tbody);

      tbl.innerHTML = "";
      tbl.appendChild(table);
      table.classList.add("table");
      table.classList.add("table-striped");
      table.classList.add("table-bordered");
      table.classList.add("table-hover");
    }
    let formatedData = formatData(data);
    renderTable(formatedData, 'tbl', '');

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  
  animation: spin 2s linear infinite;
}



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

  <div class="loader"></div>   <!-- this will show the loader  -->




  
 <div id="tbl"></div>
  
    <ul id="contextMenu" class="dropdown-menu" role="menu">
      <li><a href="test.jsp" class="link1 dropdown-item">BillSummary</a></li>
        <li><a href="test1.jsp" class="link2 dropdown-item">Category wise Summary</a></li>
    </ul>

点击上述 sn-p 链接之一后，我将转到一个新页面，我正在其中进行 ajax 调用以获取数据。

我想要做的是在单击链接 1 后显示 CSSloader 直到新页面完全加载然后在新页面完全加载后隐藏它

我进行 ajax 调用的另一个页面是

这里我将静态数据以 JSON 的形式放入，以便任何人都可以尝试我的代码，但在我的代码中我会进行 ajax 调用

/* i will makeajax call in place of json like this   
                      
                       $.ajax({
		url : "TestServlet",
		method : "GET",
		dataType : "json",
	    contentType: "application/json; charset=utf-8",
		data : {
			   fromdate : $("#startdate").val(),
               todate : $("#enddate").val(),
	           outlet : $("#all").val()
	           
			 },
			 
		success : function(tableValue) {
			
        console.log("test",tableValue);
     
         addTable(tableValue)
		
			
				
		}
			 
	});
                      
                      */


var tableValue=[
	               
	                  
	                  {
	                    "BILLNO": "D22364",
	                    "AMOUNT": 79,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22365",
	                    "AMOUNT": 36,
	                  },
	                  {
	                    "BILLNO": "D22366",
	                    "AMOUNT": 221,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22367",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22368",
	                    "AMOUNT": 79,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22369",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22370",
	                    "AMOUNT": 267,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22371",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22372",
	                    "AMOUNT": 140,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22373",
	                    "AMOUNT": 89,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22374",
	                    "AMOUNT": 202,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22375",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22376",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22377",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22378",
	                    "AMOUNT": 118,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22379",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22380",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22381",
	                    "AMOUNT": 71,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22382",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22383",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22384",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22385",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22386",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22387",
	                    "AMOUNT": 79,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22388",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22389",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22390",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22391",
	                    "AMOUNT": 126,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22392",
	                    "AMOUNT": 231,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22393",
	                    "AMOUNT": 142,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22394",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22395",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22396",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22397",
	                    "AMOUNT": 142,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22398",
	                    "AMOUNT": 62,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22399",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22400",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22401",
	                    "AMOUNT": 80,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22402",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22403",
	                    "AMOUNT": 89,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22404",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22405",
	                    "AMOUNT": 58,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22406",
	                    "AMOUNT": 147,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22407",
	                    "AMOUNT": 80,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22408",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22409",
	                    "AMOUNT": 140,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22410",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22411",
	                    "AMOUNT": 100,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22412",
	                    "AMOUNT": 58,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22413",
	                    "AMOUNT": 142,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22414",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22415",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22416",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22417",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22418",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22419",
	                    "AMOUNT": 192,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22420",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22421",
	                    "AMOUNT": 70,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22422",
	                    "AMOUNT": 70,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22423",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22424",
	                    "AMOUNT": 121,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22425",
	                    "AMOUNT": 95,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22426",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22427",
	                    "AMOUNT": 147,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22428",
	                    "AMOUNT": 76,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22429",
	                    "AMOUNT": 84,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22430",
	                    "AMOUNT": 42,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22431",
	                    "AMOUNT": 89,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22432",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22433",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22434",
	                    "AMOUNT": 47,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22435",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22436",
	                    "AMOUNT": 26,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22437",
	                    "AMOUNT": 189,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22438",
	                    "AMOUNT": 63,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22439",
	                    "AMOUNT": 37,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22440",
	                    "AMOUNT": 77,
	                    "COUNTER": "Fast Food"
	                  },
	                  {
	                    "BILLNO": "D22441",
	                    "AMOUNT": 53,
	                    "COUNTER": "Fast Food"
	                  }
	                  
	                ]
    
    
    function addTable(tableValue) {
		var col = Object.keys(tableValue[0]); // get all the keys from first
				
		var countNum = col.filter(i => !isNaN(i)).length; // count all which
															// are number
		var num = col.splice(0, countNum); // cut five elements from frist
		col = col.concat(num); // shift the first item to last
		// CREATE DYNAMIC TABLE.
		var table = document.createElement("table");

		// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

		var tr = table.insertRow(-1); // TABLE ROW.


		  for (var i = 0; i < col.length; i++) {
		    var th = document.createElement("th"); // TABLE HEADER.
		    th.innerHTML = col[i];
           
		    tr.appendChild(th);
		}

		// ADD JSON DATA TO THE TABLE AS ROWS.
		for (var i = 0; i < tableValue.length; i++) {

		    tr = table.insertRow(-1);

		    for (var j = 0; j < col.length; j++) {
		        var tabCell = tr.insertCell(-1);
		         var tabledata = tableValue[i][col[j]];
    if(tabledata && !isNaN(tabledata)){
      tabledata = parseInt(tabledata).toLocaleString('en-in')
    }
    tabCell.innerHTML = tabledata;
              
              if (j > 1)
             
              tabCell.classList.add("text-right");
              
		    }
		}

		// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
		var divContainer = document.getElementById("newTable");
		divContainer.innerHTML = "";
		divContainer.appendChild(table);
		table.classList.add("table");
		 table.classList.add("table-striped");
		 table.classList.add("table-bordered");
		 
		 
		}
                     
	addTable(tableValue)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>  
<div id="newTable"></div>

【问题讨论】：

所以你想显示一个加载器，直到页面加载（又名window.onload 已触发）并且 AJAX 调用完成？
@somethinghere yupp，直到新页面的全部内容加载完毕。
点击 ajax 调用按钮时附加一个加载 ID，在 css 中设置样式并在成功响应时删除
ajax({ beforeSend: callback })

标签： javascript jquery html css ajax

【解决方案1】：

我添加了一些 CSS 来显示一个小加载器，而 body 没有 ready 类。然后只需等待您的 ajax 调用完成并将该类添加到您的正文中。（我在错误处理程序中添加了您的模拟代码并稍微减少了它的重复，因此更容易跟踪并更接近您的原始意图）。

$.ajax({
    url: "TestServlet",
    method: "GET",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: {
        fromdate : $("#startdate").val(),
        todate : $("#enddate").val(),
        outlet : $("#all").val()
    },  
    success: function( value ) {
        
        addTable( value );
        document.body.classList.add( 'ready' );
    
    },  
    error: function( error ) {
        
        // Lets do this to keep the mock data short
        const tableValue = [{ BILLNO: "D22364", AMOUNT: 79, COUNTER: "Fast Food"}];

        while( tableValue.length < 50 ) tableValue.push( Object.assign({}, tableValue[0]) );
    
        // Lets do this to guarantee a little delay
        // So you can at least see the loader as if it took some time.
        setTimeout(() => {
        
          addTable( tableValue );
          document.body.classList.add( 'ready' );
        
        }, 1000);
    
    }  
});

function addTable( tableValue ) {

    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    var table = document.createElement("table");
    var tr = table.insertRow(-1);

    for (var i = 0; i < col.length; i++) {
    
        var th = document.createElement("th"); // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
        
    }
    
    for (var i = 0; i < tableValue.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {

          var tabCell = tr.insertCell(-1);
          var tabledata = tableValue[i][col[j]];

          if(tabledata && !isNaN(tabledata)){

              tabledata = parseInt(tabledata).toLocaleString('en-in');

          }

          tabCell.innerHTML = tabledata;

          if (j > 1) tabCell.classList.add("text-right");
  
        }
        
    }
    
    var divContainer = document.getElementById("newTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");

}

@keyframes rotate {
  from { transform: translate(-50%,-50%) rotateZ(0deg); }
  to { transform: translate(-50%,-50%) rotateZ(360deg); }
}

body:not(.ready){

  pointer-events: none;
  
}
body:not(.ready):before,
body:not(.ready):after {
  
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}
body:not(.ready):before {
  
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 1000000;
  
}
body:not(.ready):after {
  
  width: 30px;
  height: 30px;
  z-index: 1000001;
  border-radius: 50%;
  border: 5px solid white;
  border-bottom-color: transparent;
  animation: rotate 1s linear infinite;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>  
<div id="newTable"></div>

【讨论】：

嘿 yopur 代码工作正常...但我有疑问
@viveksingh 忽略超时，我对此添加了一条评论 - 它可以稍微延迟您的“错误”调用，否则加载程序几乎不会在您眼前闪烁，让您怀疑它是否那里。它只是用来模拟实际 JSON 调用所预期的一些延迟。
好吧，工作正常..但是加载程序加载时的问题..背景菜单处于活动状态，因此在这种情况下，在加载数据时，用户也可以点击其他我不想要的按钮
如果:before 和:after 的z-index 足够高，它们应该可以轻松覆盖屏幕上任何可点击的按钮和区域。我使用1 和2 作为z-indexes，但您可以轻松地将其设置为99999999 或其他东西。然后通过这些伪元素在body 上生成任何生成的事件。您还可以将pointer-events: none 添加到body:not(.ready) 规则中，以防止触发任何事件。
我添加了pointer-events: none; 规则并增加了我的sn-p 上的z-index。这应该会阻止任何交互，直到它准备好。

【解决方案2】：

如果我正确理解您的问题，您需要在整个页面上显示加载器 div，直到您从 ajax 调用中获取所有数据。您可以在高度和宽度设置为 100% 的完整页面上显示加载器 div。只需在 ajax 调用的 '.then' 部分将显示属性更改为 'block'，然后在 ajax 调用的 '.success' 块结束时将其更改回 none。

【讨论】：

你能提供什么sn-p吗？
makitweb.com/…
你可以参考这里-
我只这样做了。但是如何在加载时隐藏背景或取消激活它，以便用户无法点击其他按钮
如果你加载的window/div覆盖了整个屏幕，那么后台什么都不能点击。只需使用 loader 容器的高度和宽度为 100%

【解决方案3】：

你需要的是全屏覆盖。

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
}

【讨论】：

这不会解决我的解决方案我想在 ajax 调用完成之前显示加载器
在beforeSend 上显示覆盖，在complete 上隐藏它。

【解决方案4】：

您需要在页面加载或 ajax 调用时显示加载器

    success : function(tableValue) {
       $(".loader").show();
    }

在 DOM 上构建数据后移除加载器

      table.appendChild(tbody);
      $(".loader").hide();

【讨论】：

【解决方案5】：

使用 blockUI 插件。它作为加载器工作正常，可以配置

http://malsup.com/jquery/block/

【讨论】：