Using a placeholder does not work

This issue has been tracked since 2019-10-22.

If you pass in a placeholder prop, a ref will never be set so this.visible will always be false and LazyLoad will never render children.

See the following render method, where setRef is only called if placeholder is not defined:

render() {
return this.visible ?
this.props.children :
this.props.placeholder ?
this.props.placeholder :
<div style={{ height: this.props.height }} className="lazyload-placeholder" ref={this.setRef} />;
}

After some further investigation, it also looks like ReactDom.findDOMNode (which was used previously) was never really working for custom placeholder components either--it seems to return a react element which fails the check here as it is not HTML:

if (!(node instanceof HTMLElement)) {
return;
}

mwskwong wrote this answer on 2019-10-23

A simple workaround for the library breaking bug.

In short, we need to find a way to pass the ref to the placeholder, while this might not be possible since the placeholder might be a functional component.

shubhambatra wrote this answer on 2022-02-24

I have found the workaround. It is may not be the best solution but it is working for me.

Problem statement is:

<Lazyload once> <MyComponent /></Lazyload>

MyComponent.js
setRef = (ref) => { //some code. }
<div ref={this.setRef}><xyz /></div>

While using LazyLoad my setRef function was not calling. So I put setTimeout and change the following line of code.

<div ref={(ref) => setTimeout(() => { this.setTimeout(ref)}, 0)}> <xyz /> </div>

It started working. :)

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date