callmecavs/bricks.js

Doesn't update properly when bricks are images?

fraser-hemp opened this issue · 10 comments

fraser-hemp commented

I have a container full of a links which contain <img>s . I first pack the container, but after I add new images and try to update, they always sit behind each other (as if they have no height or width, even though when I debug the brick.js lib, it definitely recognizes the imgs height). The update is on the image loaded event. Using pack instead works, but I would much rather figure out why update isn't working.

fraser-hemp commented

Turns out it's because the container a elements weren't returning the height of the image within. Couldn't change the display so instead I set the setNodeDimensions to a querySelector, might add this as a PR for optional element targeting.

ryanhovland commented

Hey there. I'm running into the same issue. Do you have a pull request for this?

appinteractive commented

Isn't the problem caused because the images have no initial size before loaded? I would update the grid on the image load event.

  • 👍1
ryanhovland commented

Yeah, you're right. That seems to fix it. Thanks for the help.

callmecavs commented

@fraser-hemp @ryanhovland @appinteractive closing this one as it seems as though the answer has been determined - when the DOM is ready the images might not necessarily be loaded, and so they might have no height. try listening to window.readystatechange for when document.readyState === 'complete'

fraser-hemp commented

My issue wasn't waiting for imgs to load, it was the packed elements weren't inheriting the height of the child imgs. The solution was adding a querySelector in setNodeDimensions on each img load event.

callmecavs commented

@fraser-hemp my mistake, thanks for writing up the correction in case someone looks at this in the future

  • 👍1
jaytrovare commented

is there an example of this somewhere? having the same issue in react/next.js

thanks

designcrumble commented

@callmecavs I know this isn't an issue of Bricks, but I am having a problem with the layout when I do infinite loading with dynamic images.
The first render on document.readyState === 'complete' works but after that when I get the next batch of images, I am doing image.onload event to do bricks.update() . This triggers Bricks update even when just 1 image has loaded and then the rest gets stacked on top of each other.
Any suggestions on how to fix that?
demo link here

gilbert commented

I solved the issue with something like this:

<img src="..." onload="reflowBricks()" />

Where reflowBricks is a function that calls instance.pack(). This makes bricks reflow each time an image finishes loading, which I think is the best user experience.

  • ❤️2