Почему динамически добавляемое изображение всегда имеет offsetWidth 0
Я добавляю изображение через Javascript.
Изображение может быть любого размера, и я хотел бы получить размер (ширину и высоту).
Проблема в том, что offsetWidth и style.width всегда 0
Вот код для репликации
const container = document.getElementById("container");
const img = document.createElement("img");
img.src = "https://images.freeimages.com/images/large-previews/56e/hibiscus-1393855.jpg";
document.body.appendChild(img);
const result = document.getElementById("result");
result.innerText = (img.offsetWidth + " " + img.style.width);<div id = "container">
</div>
<div id = "result">
</div>Выше работает. Я запускаю то, что кажется почти идентичным кодом, но он всегда показывает offsetWidth равным 0
Как получить ширину и высоту изображения
Вы не помещаете img в DOM, поэтому вы не можете рассчитать размер изображения с помощью JS.
Нужен прослушиватель событий загрузки, чтобы получить размеры после загрузки
@pavel Не совсем так. Может прослушивать событие загрузки за пределами дома
Извините, это моя плохая работа по копированию и вставке - пытаюсь сделать ее краткой. :(
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно дождаться загрузки изображения, чтобы получить его реальный размер:
const container = document.getElementById("container");
const img = document.createElement("img");
img.addEventListener('load', function() {
document.getElementById("result").innerText = img.offsetWidth;
});
img.src = "https://images.freeimages.com/images/large-previews/56e/hibiscus-1393855.jpg";
document.body.appendChild(img);<div id = "container">
</div>
<div id = "result">
</div>Я предполагаю, что load асинхронный?
Точно. Вы просто регистрируете обратный вызов на момент появления изображения.
Спасибо. Честно говоря, я думал, что appendChild будет блокирующим вызовом! Ясно, что это не
Нет, подождите. Это. Если вы позже проверите строку, если элемент есть, вы сразу увидите его. Однако вы должны различать html-элемент img и файл src, которые должны загружаться асинхронно. как только он появится, элемент img изменит свои размеры.
Итак... для ясности, appendChild на самом деле не имеет к этому никакого отношения (ожидайте, что он добавит его в DOM). Настройка src — это то, с чего начинается процесс загрузки? Я не ожидаю, что вы знаете ответ, но если я установлю src и не добавлю его в dom, он все равно загрузит изображение:/
Да, я думаю, что возможна предварительная загрузка src перед присоединением к DOM stackoverflow.com/a/58842841/302793
Ширина и высота не будут известны до тех пор, пока браузер не получит содержимое изображения с сервера.