VueJS: при полной загрузке изображений vuе не видит размеры?

Question

[thehighhomie]

Пишу компоненты для работы с сеткой. Столкнулся с проблемой с получением размеров изображений при загрузке компонента.

В пример приведу компоненты, которые наглядно покажут проблему.

Есть компонент AppMasonry, который принимает слоты. Слоты в свою очередь - компоненты AppMasonrySlot (для реактивности).

Так как AppMasonry содержит в себе слоты компоненты, то каждый раз при изменении в свойстве $children, компонента AppMasonry, сработает хук updated, в котором я вызываю функцию перерисовки сетки.

Изображения я получаю по апи unsplash.com. Перед вставкой слотов я делаю предзагрузку изображений с помощью плагина imagesloaded.

Так вот, после введения Вас в курс дела, опишу проблему:
После того, как предзагрузятся изображения и в компонент AppMasonry вставятся слоты с компонентами AppMasonrySlot, при срабатывании хука updated, в компоненте AppMasonry, я вызываю функцию перерисовки и сетка перерисовывается.

Но, если почистить кэш браузера, именно "Изображения и другие файлы, сохраненные в кэше" и перезагрузить страинцу, то в фукнции перерисовки сетки, у каждого элемента размеры ширины и высоты равны нулю. То есть как я понял, хук updated в компоненте AppMasonry срабатывает быстрее чем картинки отрендерятся в браузере.

Такое еще может произойти, если быстро перезагружаться страницу, раз за разом.

Подскажите пожалуйста, как эту проблему можно решить?

Вот песочница с примером

Заранее прошу не предлагать ставить уже существующие плагины, я не собираюсь переписывать Masonry, у меня иные задачи по сеткам, более специфичные, а все названия компонентов в примере и сам пример описаны только в целях описания проблемы.

Comments

[Игорь]

Добавьте лог

columnHeights[columnIndex] += childrenHeights[index] + this.gutter;
console.log(columnHeights[columnIndex])

там у вас NaN

[thehighhomie]

Игорь, потому, что vm.$el.clientWidth / vm.$el.clientHeight равно NaN, так как vm.$el.clientWidth и vm.$el.clientHeight равны 0, а 0 / 0 = NaN. об этом я и пишу, размеры еще не готовы

[Игорь]

vm.$el.clientWidth на момент монтирования = 0

[thehighhomie]

Игорь, посмотрите выше, где массив childrenHeights создается

[thehighhomie]

Игорь, да, но когда элементы готовы, срабатывает хук updated и в нем тоже размеры еще равны 0. это происходит не всегда, в этом то и вопрос, как исправить?

[thehighhomie]

Игорь, решил проблему)

Answer 1

[thehighhomie]

Решил проблему. Оказалось, что это из за плагина imagesLoaded. Написал сам предзагрузку и все теперь работает нормально!

PS: Не пользуйтесь плагином imagesLoaded, чтобы потом не страдать)

Песочница с правками