improve img and add reply lazyload

This commit is contained in:
xmcp
2018-08-23 12:23:05 +08:00
parent 9bbebd9f11
commit f07c5633e1
4 changed files with 13 additions and 6 deletions

View File

@@ -40,7 +40,7 @@ function FlowItem(props) {
<Time stamp={props.info.timestamp} />
</div>
<HighlightedText text={props.info.text} color_picker={props.color_picker} />
{props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
{props.info.type==='image' ? <p className="img"><img src={IMAGE_BASE+props.info.url} /></p> : null}
{props.info.type==='audio' ? <AudioWidget src={AUDIO_BASE+props.info.url} /> : null}
</div>
);
@@ -110,7 +110,9 @@ class FlowItemRow extends Component {
</div>
<FlowItem info={this.state.info} color_picker={this.color_picker} />
{this.state.replies.map((reply)=>(
<Reply key={reply.cid} info={reply} color_picker={this.color_picker} />
<LazyLoad offset={500} height="5em" overflow={true} once={true}>
<Reply key={reply.cid} info={reply} color_picker={this.color_picker} />
</LazyLoad>
))}
</div>
);
@@ -146,7 +148,7 @@ function FlowChunk(props) {
<div className="flow-chunk">
<TitleLine text={props.title} />
{props.list.map((info)=>(
<LazyLoad key={info.pid} offset={500} height="15em">
<LazyLoad key={info.pid} offset={500} height="15em" once={true} >
<FlowItemRow info={info} callback={props.callback} />
</LazyLoad>
))}