Я использую 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
для класса (только для идентификаторов). Если вы не уверены в этих вещах, убедитесь, что вы действительно получили нужный элемент, например, с помощью оператора debugger
или console.log(document.getElementById("loader"))
.
Получите класс с querySelector
который может обрабатывать все селекторы CSS:
document.querySelector('.loader').style.display = 'none'
Обратите внимание, если у вас есть несколько классов с таким именем, он получит первый. Вам не нужно повторять его в обоих .then
"с.