Comments (15)
@arpecop @indapublic
I don't think this is a bug in Masonry or React Masonry Component.
the layoutcomplete
event fires every time Masonry completes a layout. Do you find your layout updates several times on screen? This can happen as images are downloaded.
If you want to capture 1 event every X seconds etc, you could try using Lodash's throttle or debounce functions.
http://masonry.desandro.com/events.html#layoutcomplete
from react-masonry-component.
Looks like possibly an issue with a recent change. Thanks for bringing it up. Will look at it tonight
from react-masonry-component.
@afram Same situation. Triggers 5 times on remote website and once on local machine
[email protected]
[email protected]
from react-masonry-component.
@indapublic will look into it.
from react-masonry-component.
Hi,
I think the issue might be with React Masonry Component in fact.
Each time performLayout
is called, it calls this.masonry.layout()
, which I believe will trigger the layout complete callback when it finishes.
performLayout
is invoked each time componentDidUpdate
runs.
performLayout
seems to have checks to detect when the layout needs to be changed, however it calls this.masonry.layout()
even when there are no layout changes.
As of right now, I have to be very careful about when my Masonry component renders because each time that happens another layout complete fires.
from react-masonry-component.
I have been facing the same issue. All I wanted to do was show a loading gif till my grid loaded, but onImagesLoaded / onLayoutComplete gets called repeatedly. Here's my code:
export class TeamGrid extends React.Component<ITeamGridProps, ITeamGridState> {
constructor(props) {
super(props);
this.state = {
imagesLoaded: false
}
}
public handleImagesLoaded = () => {
this.setState({ imagesLoaded: true });
}
public render() {
const childElements = this.props.members.map(function (element, index) {
// returns some div
});
const loadingGif = (<h1>Loading</h1>);
return (
<Masonry
className={'tip-masonry-grid'} // default ''
options={masonryOptions} // default {}
onImagesLoaded={this.handleImagesLoaded}
>
{this.state.imagesLoaded ? childElements : loadingGif}
</Masonry>
);
}
};
from react-masonry-component.
@afram Is there any update for this?
from react-masonry-component.
I believe there are situations when a components render method gets fired multiple times due to state or props change and that is when masonry/imagesloaded gets fired repeatedly somehow. Not sure if it is a "bug" really or if it's up to the developer to filter out unneeded re-renderings.
from react-masonry-component.
I wouldn't want the component to presume how you want to use it. I'd say the recommended approach is to throttle/debounce yourself as you know your use case best.
from react-masonry-component.
@alberto2000 @an5rag @jgraniero
Can you please try the latest version and let me know if it solves the problem for you?
from react-masonry-component.
@afram I actually just had to revisit my code that used the masonry component. I updated to the latest version and removed a lot of the logic I had around controlling calls to masonry.layout()
. the new code I have is much simpler and doesn't exhibit any of the issues I mentioned previously, so as far as I can tell (without really digging into the issues I previously experienced) it seems better.
from react-masonry-component.
I've got this issue as well. onImagesLoaded={this.handleImagesLoaded}
fires twice if you setState within handleImagesLoaded
. For instance
handleImagesLoaded(imagesLoadedInstance) {
this.setState({ loading: false });
}
from react-masonry-component.
I got the same issue and I have fixed with following library and tweaking some css code.
https://github.com/oyvindhermansen/react-images-loaded
<ImagesLoaded
elementType={"div"} // defaults to 'div'
className={"your-container-class"} // defaults to 'images-loaded-container'
style={{ display: this.state.imagesLoaded ? "block" : "none" }}
onAlways={this.handleOnAlways}
onProgress={this.handleOnProgress}
onFail={this.handleOnFail}
done={this.handleDone}
>
{photos.map((item, index) => {
return (
<Photo
key={index}
photo={item}
onToggleAddBtn={() => this.toggleAddBtn(item.key)}
/>
);
})}
from react-masonry-component.
No updates on this one, fires 2 times, 1 in middle of positioning images, 2 when completed
from react-masonry-component.
Here is the illustration of the problem
from react-masonry-component.
Related Issues (20)
- Small Bug HOT 2
- Is there any way to animate fading out elements on update?
- RTL Support HOT 1
- Demo website is broken HOT 2
- How to centre the images? HOT 1
- onImagesLoaded is being called twice HOT 1
- Is it possible to show different widths? HOT 1
- A simple CodeSandbox image gallery example
- Update to React 17 HOT 4
- What are the masonry options properties? HOT 2
- Need Help: Not able to add gutter between the cards.
- Demo not working? HOT 3
- Masonery not correctly layout because force to have invisible columns
- how to fix 'Image elements do not have explicit width and height' in pageSpeed
- Support React 18 HOT 2
- Add support for Scss/css module .
- it works only very first time and then it loses position HOT 1
- I seem to have no control over the height of the masonry component HOT 1
- Live Link
- StrictMode breaks Masonry HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-masonry-component.