search

paulcollett / vue-masonry-css

Vue.js Masonry layout component powered by CSS, dependancy free
https://paulcollett.github.io/vue-masonry-css/demo/
MIT License
478 stars 42 forks source link

Default values apply first, then the props, resulting in a flicker on page load #31

Closed seanlloydbooth closed 3 years ago

seanlloydbooth commented 3 years ago

Hi,

I've noticed that on page load, the default values of 2 columns and 0 gutter is applied, before the values I've specified in the props (:cols = "{default: 1, 9000: 2, 1024: 1}", gutter="16"). I set the default to 1 and the next upper bound to 9000, to try and force the default to go to 1, but that didn't work.

You can see it on my site here: Sean Lloyd

In a smaller (mobile) view, it briefly loads the two columns before pinging back to one:

Mobile

On the larger (desktop) view, it's already set to 2 columns fortunately, but the gutter bounces to 16 once the page has loaded:

Desktop

Is there anything I can do about this? On slower connections, it seems to take longer to reposition the elements, so I'm guessing masonry waits for DOMContentLoaded or something similar before running - can we run it sooner?

Something to note is that the elements are not loaded with the page, and more elements are added with lazy loading as the user scrolls - not sure if that's what is causing the issue!

seanlloydbooth commented 3 years ago

Almost immediately solved my own problem!

Moving my loading logic into "mounted" rather than "created" changed the order of the load - my guess is that the masonry layout is applied once the component is mounted, since it can rely on the content being added.