在页面显示之前预加载API

Question

我想在显示之前预加载API数据。当我加载页面时，大约需要2秒钟才能显示API数据。有什么方法可以加载数据并将其保存在浏览器内存中吗？还是仅在数据准备好后显示页面？这是我的代码：

HTML ：（由于某种原因我不能将其放在此处，它不会显示） https://docs.google.com/document/d/1Fhze-o18oOpRO9MinKZBHelZBixAjhip01XJT_6RZVs/edit?usp=sharing

JavaScript：

let dt = new Date();
const api_url = 'https://calendarific.com/api/v2/holidays?&api_key=6c375f949eb158e40d2608c58e11c6d78d05356d&country=US&year=2020';

//showingHolidaysNameFromAPI
async function getNameOfHolidayDataFromAPI(){
    const response = await fetch(api_url);
    const data = await response.json();
    var todayISO = dt.toISOString().substring(0, 10);
    for (i = 0; i < data.response.holidays.length;i++){
        if (data.response.holidays[i].date.iso.substring(0, 10) == todayISO){
            document.getElementById("holiday_name").innerHTML =
                "Today is " + data.response.holidays[i].name + " national day.";
                var x = document.getElementById('holidayBarImage');
                x.style.display = 'inline-block';
            document.getElementById("holidayDescriptionContent").innerHTML =
                data.response.holidays[i].description;
                break;
        }
        else{
            document.getElementById("holiday_name").innerHTML = " ";
            var x = document.getElementById('holidayDescription');
            x.style.display = 'none';
            document.getElementById("holidayDescriptionContent").innerHTML = " ";
            var y = document.getElementById('holidayBarImage');
            y.style.display = 'none';
        }
    }

}

//showingHolidaysDescriptionFromAPI
async function getDescriptionOfHolidayDataFromAPI(){
    var x = document.getElementById('holidayDescription');
    if (x.style.display == 'block') {
        x.style.display = 'none';
    }
    else {
        x.style.display = 'block';
    }
}