How to make Image load faster in my javascript code

Question

I have a simple weather map where each time there is different weather status the background image should change the code below works fine but it takes seconds two change the image. so my question is, is this because of the way my code is structured, if not then what could be the issue and how can I improve the performance faster.

form.addEventListener("submit", getData);

function getData(e){
    e.preventDefault();
    const link = 'http://api.openweathermap.org/data/2.5/weather?q=';
    const cityInput = input.value;
    const apiId = '&appid=12345667889&units=metric';
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = ()=>{
      if (xhr.readyState == 4 && xhr.status == 200) {
        const object = JSON.parse(xhr.response);
        country.textContent = object.sys.country;
        city.textContent = cityInput;       
        humid.textContent = object.main.humidity + "%";
        temp.textContent = object.main.temp;
        wind.textContent = object.wind.speed + "mph";
        let snrise = object.sys.sunrise;
        let snset = object.sys.sunset;
        let dtrise = new Date(snrise*1000);
        let dtset = new Date(snset*1000);
        let risehrs = dtrise.getHours();
        let sethrs = dtset.getHours();
        let risemnts = "0" + dtrise.getMinutes();
        let setmnts = "0" + dtset.getMinutes();
        sunrise.textContent = risehrs + ' : ' + risemnts.substr(-2) ;
        sunset.textContent = sethrs + ' : ' + setmnts.substr(-2);
        const weatherName = object.weather[0].description.slice(0,17);
        status.textContent = weatherName;

        if(weatherName.includes("rain")){
           bgImg.src = "./images/rain.jpg";
        }
        else if(weatherName.includes("clouds")){
           bgImg.src = "./images/clouds.jpg";
        }
        else if(weatherName.includes("snow")){
           bgImg.src = "./images/snow.jpg";
        }
        else if(weatherName === "mist"){
           bgImg.src = "./images/mist.jpg";
        }
        else if(weatherName === "clear sky"){
           bgImg.src = "./images/clear-sky.jpg";
        }
        else if(weatherName === "smoke"){
           bgImg.src = "./images/smoke.jpg";
        }
        else if(weatherName === "dust"){
           bgImg.src = "./images/dust.jpg";
        }
        else if(weatherName === "drizzle"){
           bgImg.src = "./images/rain.jpg";
        }
        else if(weatherName === "haze"){
           bgImg.src = "./images/haze.jpg";
        }
        else if(weatherName === "fog"){
           bgImg.src = "./images/foggy.jpg";
        }
        else if(weatherName === "thunderstorm"){
           bgImg.src = "./images/thunderstorm.jpg";
        }
        else{
           bgImg.src = "./images/pexels-photo-39811.jpg";
        }
      }
    }
    xhr.open('GET', link + cityInput + apiId, true);
    xhr.send();
}

Answer 1

As soon you do bgImg.src the browser will lookup for that image, from cache (which is fast) - or from the internet - which causes the slow gap.

Instead, make sure the image is loaded, than set the bgImg.src to the loaded resource.

const icon = "";

if(weatherName.includes("rain")){
   icon = "./images/rain.jpg";
} else if(weatherName.includes("clouds")){
   icon = "./images/clouds.jpg";
} // etc...

const img = new Image();
img.addEventListener('load', () => bgImg.src = img.src );
img.src = icon;