如何在我的javascript代码中更快地加载图像

我有一个简单的天气图，每次有不同的天气状况的背景图像应该改变下面的代码工作正常，但它需要两秒钟改变图像。所以我的问题是，这是因为我的代码的结构，如果不是的话，那么会是什么问题，以及如何更快地提高性能

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();
}

---

一旦您执行了

bgImg.src

操作，浏览器就会从缓存（速度快）或互联网上查找该图像，这会导致间隔变慢

相反，请确保图像已加载，然后将

bgImg.src

设置为加载的资源

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;

---

非常感谢您的回复，但您能否解释一下这个新的IMG变量是什么，以及如何将其与我的bgImgups连接起来。。固定的应该是

img

@KinanAlamdar