我正在尝试使用<PostList />
容器创建一个简单的消息墙,该容器显示<Post />
个组件的列表。
{posts.map(function (post: any) {
return <Post key={post.postid} post={post} />;
})}
我将单个帖子传递给Post
组件,该组件具有<Avatar />
组件,该组件在其中显示用户profile_pic,否则显示一个微调器。
我的问题是我如何允许组件在屏幕上显示,一旦加载图像,用检索到的图像替换微调器?
我目前有以下Reducers和Actions:
用户缩减器:
export default function(state = INITIAL_STATE, action : any){
switch(action.type){
case FETCH_USER_LOADING:
return Object.assign({}, state, {isLoading: true});
case FETCH_USER_DONE:
return Object.assign({}, state, {users: state.users.concat(action.payload)});
}
return state;
}
用户操作:
export function fetchUser(id: any) {
return function (dispatch: any) {
dispatch({ type: FETCH_USER_LOADING });
return axios.get(`${ROOT_URL}/users/${id}`, {
headers: { token: localStorage.getItem('token') }
})
.then(function (response) {
dispatch({type: FETCH_USER_DONE, payload: response.data});
return response.data
})
}
}
答案 0 :(得分:8)
有很多方法可以做到。
其中一个是编写自己的组件,其中,新加载的图像会在componentDidMount
中提示重绘。以下是您可以在自己的项目中使用的延迟图像的完整源代码:
export default class LazyImage extends React.Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
error: false
};
}
componentDidMount() {
const img = new Image();
img.onload = () => {
this.setState({
loaded: true
});
};
img.onerror = () => {
this.setState({
error: true
});
};
img.src = this.props.src;
}
render() {
if (this.state.error) {
return <img
className={this.props.className}
style={this.props.style}
src={this.props.unloadedSrc}
alt={this.props.alt} />
} else if (!this.state.loaded) {
return <img
className={this.props.className}
style={this.props.style}
src={this.props.unloadedSrc}
alt={this.props.alt} />
}
return <img
className={this.props.className}
style={this.props.style}
src={this.props.src}
alt={this.props.alt} />
}
}
然后你会这样使用:
<LazyImage unloadedSrc={unloadedSrc} src={src} />
然后,您可以选择使用大量的组件,只需通过Google搜索术语即可找到:
或任何类似的搜索词种类。我最喜欢的组件是react-imageloader
。
我希望这会有所帮助。
答案 1 :(得分:0)
我为延迟加载图片创建了一个库。它的主要功能是提供动态调整图像大小,但它也可以解决您的问题。
https://github.com/peterlazzarino/react-adaptive-image
这是一个可用于延迟图像加载的示例,它将解析来自imgur的图像。在我的生产应用程序中,我的图像解析器指向图像服务器,但这完全可以自定义。您只需要将.header-image类设置为具有高度和宽度。
import React from 'react';
import ReactDOM from 'react-dom';
import { initImages } from 'react-adaptive-image';
import AdaptiveImage from 'react-adaptive-image';
initImages({
imageResolver: function(image){
return `https://i.imgur.com/${image.fileName}`
}
})
class App extends React.Component {
render() {
return (
<AdaptiveImage backgroundImage className="header-image" fileName={'U6zWkcZ.png'} />
);
}
}
ReactDOM.render(<App />, document.getElementById('react-root'));