使用 FETCH 等待服务器响应时显示预加载器元素

Question

在使用

fetch

显示请求的数据之前，我没有看到我的预加载器关于如何让它发挥作用的任何想法？showLoadhideLoadloader

改变

let searchButton = document.getElementById('button')
let showInfo = document.getElementsByClassName('conteinerInfo')
showInfo[0].setAttribute('id', 'mainddiv')
let divId = document.getElementById('mainddiv')
let loader = document.getElementById('load')

function showLoad(){
     loader.classList.add('display')
    
}

function hideLoad(){
    loader.classList.remove('display')
}

function getWeather () { 
 
showLoad()
fetch(`http://api.weatherapi.com/v1/current.json?key=XXXXXXX&q=${input.value}&aqi=no`) 
.then(response => response.json())
.then(res => { 
    hideLoad()
   let celsius  = 'Temp' + ' ' + res.current.temp_c + " " + '°C'
divId.innerHTML =  celsius

})
} 

searchButton.addEventListener('click', getWeather)

Answer 1

<div class="conteinerInfo">
    <div id="load"></div>
</div>