Почему при загрузке страницы скрипт не видит offsetHeight картинки?

Question

[Артём]

Вроде скрипт выполняется после загрузки контента, но почему-то если при загрузке переменной height1 присвоить offsetHeight и потом вывести, выводится 0, почему так?

window.addEventListener('DOMContentLoaded', function(){
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');
    let insert = document.getElementById('insert')
    let image = document.getElementById('img')
    let reset = document.getElementById('reset')
    let height1 = image.offsetHeight;
    let width1 = image.offsetWidth;
    alert(height1)
})

Answer 1

[Ilya Loginov]

Это происходит из-за долгой загрузки картинки т.к. DOMContentLoaded срабатывает при окончании загрузки html и построении dom, но он не ждет загрузку картинки, используйте window.onload. Вот тут можно про это почитать подробнее и с примерами кода.