[英]Fetch API css-loader
我正在使用访存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"))
。
使用querySelector
获取一个可处理所有CSS选择器的类:
document.querySelector('.loader').style.display = 'none'
请注意,如果您有多个使用该名称的类,它将获得第一个。 您无需在两个.then
重复它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.