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
.