JavaScript - Ustawienie tego samego obrazka dwa razy

Question

Witam wszystkich, 

Postanowiłem ostatnio zrobić mini projekt związany z pogodą. Na ten moment jestem już na samej końcówce, pozostała mi tylko dynamiczne załadowanie obrazu i następnie wyświetlenie pogody.

No i właśnie z tym mam problem. Chce aby po zapytaniu i pobraniu danych z API, następnie JS ustawił dwa razy w innych miejscach w kodzie to samo zdjęcie i co najważniejsze załadował je tylko raz. Próbowałem zrobić to za pomocą konstruktora Image(), zwykłym innerHTML itd., ale nic nie działa i teraz nie wiem czy ja to robię źle czy nie ma po prostu takiej możliwości.

Dla jasności podsyłam zrzut ekranu projektu, ponieważ wydaje mi się, że kod akurat do tego problemu jest zbędny:

Link do zdjęcia

Comments

Na tym obrazku praktycznie nic nie widać.

---

Teraz powinno być już dobrze

---

A mógłbyś jeszcze pokazać, jak wyglądają nagłówki odpowiedzi HTTP dla tego zdjęcia?

---

https://i.imgur.com/mpZCStO.png

Answer 1

Nagłówki odpowiedzi wskazują na to, że jest wyłączony cache (Cache-Control: public, max-age=0). Prawdopodobnie to powoduje, że obrazek jest zawsze zaczytywany na nowo.

Dodatkowo masz zaznaczoną opcję "Disable cache" w devtools ;)

Comments

Faktycznie, zapomniałem to odznaczysz po ostatnim projekcie, teraz wszystko działa poprawnie :D

Answer 2

Pokazałbyś kod w którym używasz `Image()`?

Comments

Niestety nie mam go już, ale wyglądał on mniej więcej tak:

let _img = document.getElementById('id1');
let _img2 = document.getElementById('id2');

const img = new Image();

img.addEventListener("load", () => {
    _img.src = img.src;
    _img2.src = img.src;

    //Dalej pojawia się pogoda
});

img.src = 'http://local..';

 

---

Tutaj jest przykład rozwiązania zgodnie z kodem który podałeś - pobiera obraz tylko raz https://jsfiddle.net/kt84om9x/

Sprawdź pozostałą część swojej aplikacji, może gdzieś jeszcze robisz dodatkowy request.

---

        let weather_background_wrapper_img = document.querySelector('.weather-background-wrapper-img');
        let weather_background_img = document.querySelector('.weather-background-img');

        const img = new Image();

        img.addEventListener("load", () => {
            weather_background_wrapper_img.src = img.src;
            weather_background_img.src = img.src

            loader.style.visibility = "hidden";
            weather_cnt.style.visibility = "visible";
            weather_background_wrapper.style.visibility = "visible";
        });

        img.src = "img/background/background-" + status + ".jpg";

Tak wygląda kod w tym momencie u mnie i dalej występuje problem, jednak doszedłem do wniosku, że jeśli w ostatniej linijce zamiast własnego zdjęcia dam z zewnętrznego serwera (tak jak ty z logo Google) to wszystko działa.

Sprawdziłem i zdjęcie jest ładowane za pośrednictwem 7 i 15 linijki kodu.

---

Hmm... nie powinno mieć znaczenia czy pobierasz zasób z tego samego czy innego hosta, a przynajmniej nie jestem świadomy dlaczego miałoby to mieć znaczenie.

---

Problem został rozwiązany przez Comandeer, jak się okazało to zapomniałem włączyć zapisywanie pamięci podręcznej po ostatnim projekcie :D Ale i tak dzięki za poświęcony czas i pomoc