Как заставить Image загружаться быстрее в моем коде JavaScript - PullRequest
Новая
       6

Как заставить Image загружаться быстрее в моем коде JavaScript

0 голосов
/ 20 февраля 2019

У меня есть простая карта погоды, где каждый раз при различном статусе погоды фоновое изображение должно изменить код, приведенный ниже, работает нормально, но это занимает секунды две, чтобы изменить изображение.поэтому мой вопрос заключается в том, как из-за структуры моего кода, если нет, то в чем может быть проблема и как я могу улучшить производительность быстрее. 

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

1 Ответ

0 голосов
/ 20 февраля 2019

Как только вы сделаете 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;
...