infinite scroller one by one in react js with images

444
April 20, 2017, at 9:32 PM

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.

Rent Charter Buses Company
READ ALSO
Discord chat bot change channel post permissions

Discord chat bot change channel post permissions

I'm currently writing a discord bot for a role-play barI want it to close down the bar (i

516
Postgres column value not updating properly?

Postgres column value not updating properly?

I have a data in the below format:

401
Socket.IO SSL connection error not using express

Socket.IO SSL connection error not using express

I'm trying to connect to my SocketIO server, but the connection couldn't be made

400
got error while upload video in youtube Error: Login Required

got error while upload video in youtube Error: Login Required

While upload video in youtube in node using Key I got Login required error

395