infinite scroller one by one in react js with images

I need to display list of content one by one while scrolling. Initially I need to show four content only. After I scroll window show one by one. I'm working on react js. So I put one NPM plugin and import it on top of the component.

npm install react-infinite-scroller --save

import InfiniteScroll from 'react-infinite-scroller';

And with in component generate the infinite scroller plugin, see below:

<InfiniteScroll
          pageStart={0}
          initialLoad={false}
          threshold={650}
          loadMore={this.loadFunc.bind(this)}
          hasMore={true || false}
          loader={<div className="scroll-loader text-center"><img src="img/feed-preloader.gif" alt="" /></div>}
          useWindow={false}
          >
          <ThinkListing data={data} />
        </InfiniteScroll>

It's working fine but problem is, Each content have a different size of images. So some content loaded fully before previous content load. For example 7th content load only paragraph but image not get it. by the 8th content loaded with image and paragraph. Hence, I need to load every content with image then only next content load I mean show next content.

via vijayaganth