Firefox, XMLHttpRequest i pamięć cache

0

Korzystam z Firefoxa 59 na Fedorze. Stworzyłem stronę w HTML, na tej stronie mam element <img>. Jego atrybut src ustawiam domyślnie w HTML-u, a następnie zmieniam ten atrybut obiektem XMLHttpRequest (abstrabuję tutaj od sensowności takiego rozwiązania – powiedzmy, że robię to dla sprawdzenia, czy będzie tak działać).

I teraz: gdy odświeżę stronę za pomocą CTRL+F5 (czyli z usunięciem pamięci cache) albo wejdę na podstronę z elementem <img> z zakładki na stronie głównej, do konsoli wypisuje mi szerokość obrazu ustawionego w HTML-u (960px). Gdy natomiast odświeżę stronę za pomocą F5, wypisuje mi szerokość obrazu ustawionego przez obiekt XMLHttpRequest. Dlaczego tak jest?

Mój kod (wersja uproszczona):

Kod HTML:

<img src="../images/notepad-flowers-960.jpg" class="image-slider__image" alt="Photo" />

Kod Javascript:

window.addEventListener("load", function() {
    var request = new XMLHttpRequest();
    request.onload = function() {
        var imgElementCollection = document.getElementsByClassName(
            "image-slider__image"
        );
        imgElementCollection[0].setAttribute(
            "src",
            imagesDirectory + imageFilenames[currentImageIndex] // domyślne wartości tych danych odpowiadają obrazkowi o szerokości 1600px
        );
        console.log(imgElementCollection[0].width); // przy "F5+CTRL" zwraca `960`, a przy "F5" - `1600`
    }
    request.open("GET", "get-filenames.php"); // tu się pobiera dane obrazków, mniej ważne
    request.send();
});

Prócz bezpośredniej odpowiedzi byłbym również wdzięczny za jakiekolwiek źródła informacji na ten temat.

Stworzyłem ten wątek w dziale "Newbie", ale być może zasługuje na przeniesienie.


UPDATE: Domyślam się, że Firefox zapisuje sobie obraz pobrany XHR-em i przy pierwszym odświeżeniu aktualizuje stronę – dlaczego jednak nie jest to robione od razu po żądaniu XHR?


UPDATE 2: Gdy debuguję narzędziami deweloperskimi w Firefoksie (z ustawieniem punktu wstrzymania), rozmiar wyświetla się taki sam przy obu sposobach odświeżenia. Z tego domyślam się, że Firefox po prostu wykonuje żądanie XHR szybciej, niż odświeża stronę. Byłoby to kuriozalne, ale co innego może to być...


UPDATE 3: Co ciekawe, obraz zostaje umieszczony poprawny (zawsze ten sam, który został pobrany XHR-em). Problemem są jedynie jego własności width oraz heigth.

0

UPDATE 4: Problem rozwiązany. Kurczę, nie myślałem, że to będzie takie proste. Ale cieszę się, bo nie cierpię inconsistency w językach programowania. Pomogła mi ta odpowiedź: https://stackoverflow.com/a/16084408. Chodzi o to, że kiedy ja próbowalem wczytać własności width oraz height obrazka, on jeszcze nie został do końca załadowany... i trzeba było umieścić pozostały odnoszący się do niego kod w jego funkcji onload.

Dziękuję, jeśli ktoś też nad tym myślał. Nie cierpię nierozwiązanych spraw...

1 użytkowników online, w tym zalogowanych: 0, gości: 1