[英]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.