1

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

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

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

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

2 ответа 2

1

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

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

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.