Question

我正在研究如何显示加载程序，直到页面上加载数据为止。我已经成功创建了加载器，并且也可以正常工作，加载器加载时我卡住了，我想停用背景，就像用户无法单击任何地方一样这是我的片段

$('.loader').show();
$.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);

  },
  complete: function() {
    $('.loader').hide();
  }

});


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");


}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="loader"></div>

<div id="newTable"></div>

我在这里放置示例JSON，因此如果有人要检查，他们可以轻松检查

  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"
          }
        ]

我正在为此使用j查询隐藏和显示方法，并且在成功调用后将其隐藏。

我也想将装载机中心定位

请有任何想法的人帮助我

Answer 1

您需要添加一个覆盖图，在这里我发布了基本答案，请尝试一下。您可以通过调用$('.overlay').hide();函数最后一个中的addTable隐藏加载程序

$('.loader').show();

   var tableValue = [
        {
            "amount": 476426,
            "billdate": "2018-09-01",
            "outlet": "JAYANAGAR"
          }
        ]
    addTable( tableValue );
		



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");
	//$('.overlay').hide();
	}

.loader {
 position: absolute;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  
  
}
.overlay {
    background: #e9e9e9; 
          
    position: absolute;  
    top: 0;                
    right: 0;               
    bottom: 0;
    left: 0;
    opacity: 0.5;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="overlay">
<div class="loader"></div>
</div>

  <div id="newTable"></div>

Answer 2

主要思想是添加新元素<div class="overlay"></div>，以覆盖您的所有内容。这是装载机居中的完整示例：

$('.loader').show();
$('.overlay').show(); // show overlay when loader is active
$.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 );    		
	},
	complete: function(){
            $('.loader').hide();
            $('.overlay').hide(); // hide overlay when you need your page to be active (e.g. clickable)  
	}
			   
});


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");
	 
	 
	}

.loader {
  display: none; /* it shouldn't be visible by default */
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  /* align loader vertically via position, left and right  */
  position: fixed;
  left: calc(50% - 60px);
  top: calc(50% - 60px);
  z-index: 10001; /* z-index should be more than z-index of .overlay */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.overlay {
  display: none; /* it shouldn't be visible by default */
  background-color: rgba(1, 1, 1, 0.15);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000; /* z-index should be less that z-index of .loader */
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="loader"></div>
<div class="overlay"></div> <!-- new element -->

  <div id="newTable"></div>

Answer 3

这是给那些寻找的人的jQuery解决方案：

用CSS隐藏正文，然后在页面加载后显示它：

CSS：

html { visibility:hidden; }

JavaScript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

页面加载后，页面将从空白变为显示所有内容，没有内容闪烁，也没有观看图像加载。

以及更多refer this

加载程序放置时如何停用背景

3 个答案: