twobin / twobin/react-lazyload

How to manually signal the removal of the placeholder

Open
#101 5 comments 3 reactions 0 assignees View on GitHub
feature
Dominant language
JavaScript
Stars
5.9k
Forks
485
PR merge metrics
No merged PRs in 30d

Description

Consider the following snippet

```javascript
render () {
const { src, srcSet, sizes, placeholder } = this.props
return (

}>
{
this.setState({ isLoading: false })
}}
/>


)
}
```

Here I'm using a placeholder with a base64 image, which is blurred by the Blur object. When the image loads, I'm releasing the blur effect. The problem here is that LazyLoad is removing the placeholder as soon as the Image object is mounted. But then it still needs to download the image data. So what you get is a flash of nothing, between the mounting and the loaded image.

Is there a way to make LazyLoad swap out the placeholder by setting a prop or something? I need to pass the isLoading state into LazyLoad and have it wait for that before removing the placeholder.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.