Question

我有一个简单的天气图，其中每次有不同的天气状态时，背景图像应更改以下代码，效果很好，但是两次更改图像需要花费几秒钟。所以我的问题是，这是因为我的代码的结构方式所致，如果不是，那可能是问题所在，以及如何更快地提高性能。

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

您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;

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

1 个答案: