Почему событие загрузки DOM и событие RESIZE при определении ширины блока дают разные значения?

Question

[Матвей Березин]

День добрый, корифеи! Подскажите, пожалуйста, от чего при событии загрузки DOM - функция выдаёт не верную ширину. Тогда как, в дальнейшем, при изменении размеров окна всё работает корректно.

//приравнять ширину RESUME к высоте блока backgInscript    
    $(fnResizeHight);
    $(window).resize(fnResizeHight);
    // /конец приравнивания высот

    function fnResizeHight() {
        let width = $('#resume').width();
        console.log("ширина блока resume - " + width);
        $('#backgInscript').css('height', width);
    };

Answer 1

[Stalker_RED]

DOMContentLoaded срабатывает когда загружен и обработан движком браузера весь HTML-код, но еще не загружены дополнительные ресурсы, типа изображений, стилей, скриптов.

А в дальнейшем, при ресайзе, видимо какие-то стили (или скрипты) уже загружены, и они повлияли на размер элемента.

Comments

[Матвей Березин]

Да действительно. Спасибо. Вот так работает:

window.onload = function() {
        let resume = document.getElementById('resume');
        let widthResume = window.getComputedStyle(resume).getPropertyValue('width');
        console.log("ширина блока resume сразу после загрузки - " + widthResume);
    };

Я думал, что конструкция $(function() {...}); ждёт загрузки стилей тоже. Спасибо.

[Stalker_RED]

load ждет загрузку и обработку всех ресурсов, все верно.

load, jQuery.ready() и DOMContentLoaded это три разных события. Рекомендую почитать какую-то статью об отличиях, это еще не раз пригодится.