Баг Google Chrome или неправильный код? Неправильно получает значения ширины и высоты картинки

Question

Ребят, столкнулся с такой проблемой, я делаю простой вьювер изображений и в одном моменте мне просто нужна ширина значения изображения для анимации. Но суть вот в чём.

Есть вот такой кусок кода:

animate(from, to, func, duration) {
    self = this;

    let beginTop = from.getBoundingClientRect().top;
    let beginLeft = from.getBoundingClientRect().left;
    let beginWidth = from.getBoundingClientRect().width;

    let endTop = to.getBoundingClientRect().top;
    let endLeft = to.getBoundingClientRect().left;
    let endWidth = to.getBoundingClientRect().width;

    console.dir(to);
    console.log(to.clientWidth, to.naturalWidth);
    console.log(to.getBoundingClientRect())

    let deltaTop = endTop - beginTop;
    let deltaLeft = endLeft - beginLeft;
    let deltaWidth = endWidth - beginWidth;
    ...

Здесь я получаю свойства изображения, в данном случае мне нужна ширина. Попробовал двумя способами, через функцию и напрямую. Так вот, в остальных браузерах все значения выводят корректно, кроме Google Chrome, он выводит ширину и высоты по нулям. При этом вроде бы видно, что в console.dir(to) он вроде бы выводит значения ширины и высоты.

Но строкой ниже, когда получаешь свойство напрямую, он выдаёт их по нулям.

Как вообще понять? Мой косяк или косяк хрома?? Так как в остальных браузерах значения выводит почему-то корректно.

Есть видеофайл с демонстрацией проблемы. https://ru.files.fm/f/8ms9hnma

Возможный дубликат вопроса: Странное поведение Javascript при передаче объекта по ссылке — Dmytro, May 12 '20 at 15:00
Это не совсем то, дело в том, что неважно, что мы выводим в консоль, а то, что свойство ширины для одного и того же кода выводится по разному в разных браузерах. Там нет ответа на этот вопрос. — Глеб, May 12 '20 at 18:15
нули выводит, потому что в момент вывода в консоль данных о ширине и высоте еще нет. Но потом, когда Вы смотрите объект картинки, эти данные уже есть. Ответ, на вопрос, почему так - находится по ссылке, что я дал выше — Dmytro, May 12 '20 at 19:33
Ответ оказался тривиальнее) Перед всеми операциями надо просто было добавить onload, да. Картинка просто не успела прогружаться и данных не было. Однако почему именно в console.dir он уже выводил эти данные до загрузки, немного смутило. Как будто эти данные были изменены или получены реактивно сами по себе после загрузки. — Глеб, May 12 '20 at 19:43

score 1 · Accepted Answer · answered May 12 '20 at 19:48

1

Ошибка была по моей вине. Перед всеми манипуляциями с картинками и перед вставкой её в DOM нужно обрабатывать всё через onload обработчик. Однако почему console.dir вывел эти данные до загрузки, немного смутило и немного непонятно для меня.

answered May 12 '20 at 19:48

Глеб

47

2

«почему console.dir вывел эти данные до загрузки» — потому что он ленивый и подгружает содержимое объекта только в момент разворачивания списка, а к этому моменту картинка уже успевает загрузиться и имеет размеры – andreymal May 12 '20 at 19:51

score 0 · Answer 2 · answered May 12 '20 at 15:36

0

Свойство Element.clientWidth равно 0 для инлайн элементов и элементов без CSS.

Более подробно тут

С naturalWidth тоже есть варианты, когда по умолчанию возвращается 0. Проверьте, не ваш ли это случай.

answered May 12 '20 at 15:36

Yugofx

1,833

В том и дело, что стили применены и этот элемент блочный. Тогда бы навярняка такое поведение не работало бы во всех браузерах, если так написано в спецификации. – Глеб May 12 '20 at 18:15

Баг Google Chrome или неправильный код? Неправильно получает значения ширины и высоты картинки

2 Answers2