我正在使用fetch API来访问JSON对象。
我的问题是如何在显示实际数据之前实现css加载器。我怎么知道数据已经显示。
这就是我尝试过的:
var startSevenDaysInterval = (new Date).getTime();
var endSevenDaysInterval = startSevenDaysInterval - 604800000;
function fetchData2() {
fetch('https://vannovervakning.com/api/v1/measurements/3/' + endSevenDaysInterval + '/' + startSevenDaysInterval + '/')
.then(function (response) {
if(response === 404){
document.getElementById("loader").style.display = 'none';
}
return response.json();
})
.then(function (data) {
document.getElementById("loader").style.display = 'none';
printTemperature(data);
});
}
function printTemperature(data) {
var html = "<h5>";
html += data.data["TEMPERATURE"][0].value;
html += "</h5>";
document.getElementById('temp1').innerHTML = html;
}
setInterval(function () {
fetchData2();
}, 1000);
我的装载机看起来像这样:
.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #e0e0e0;
border-radius: 30px;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
我的HTML看起来像这样:
<div class="tempVal">
<div class="loader"></div>
<div id="temp1"></div>
</div>
你已经这样做了,但是使用getElementById
作为一个类(它只用于ID)。如果您对这些事情不确定,请确保您确实获得了所需的元素,例如:使用debugger
声明或console.log(document.getElementById("loader"))
。
获取一个可以处理所有css选择器的querySelector
类:
document.querySelector('.loader').style.display = 'none'
请注意,如果您有多个具有该名称的类,它将获得第一个。你不需要在.then
中重复它。