Lazy load CSS background image?

This issue has been tracked since 2017-09-20.

Is it possible to lazy load the css background property?

jasonslyvia wrote this answer on 2017-09-20

I believe you can construct following component tree to achieve your goal:

<LazyLoad>
  <Background>
    <YourComponent />
  </Background>
</LazyLoad>

in Background component, it can roughly be (pseudo code):

function Background({ children }) {
  return (
    <div style={{ background: 'url(./kitty.png)' }}>
      {this.props.children}
    </div>
  );
}
chhuang wrote this answer on 2017-09-20

Got it! Basically it still lazy loading the HTML/component. That would do for now.

Thanks!

Ajeetlakhani wrote this answer on 2021-01-22

Is there any possibility for lazyload only the background image not whole component (textual content will be there only to lazyload bg image)?

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