javascript - 如何在我的 javascript 代码中加快图像加载速度

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;