diff --git a/src/components/Cards/ImageCard.js b/src/components/Cards/ImageCard.js index 001bf391..265f8bdc 100644 --- a/src/components/Cards/ImageCard.js +++ b/src/components/Cards/ImageCard.js @@ -1,22 +1,55 @@ import React, { PropTypes } from 'react'; import { Card } from '../UI'; -export default function ImageCard({ onClick, image, text }) { - return ( - - -

{text}

-
- ); +export default class ImageCard extends React.Component { + constructor(props) { + super(props); + this._image = null; + this.fetchImage = this.fetchImage.bind(this); + } + + componentDidMount() { + this._image = new Image(); + if (this.props.image) { + this.fetchImage(this.props.image); + } + } + + componentWillReceiveProps(nextProps) { + if (this.props.image !== nextProps.image) { + this.fetchImage(nextProps.image); + } + } + + componentWillUnmount() { + this._image.onload = null; + this._image = null; + } + + fetchImage(src) { + this._image.onload = this.props.onImageLoaded; + this._image.src = src; + } + + render() { + const { onClick, image, text } = this.props; + return ( + + +

{text}

+
+ ); + } } ImageCard.propTypes = { image: PropTypes.string.isRequired, - onClick: PropTypes.func, + onImageLoaded: PropTypes.func, text: PropTypes.string.isRequired }; ImageCard.defaultProps = { onClick: function() {}, + onImageLoaded: function() {} }; diff --git a/src/components/EntryListing.js b/src/components/EntryListing.js index beed5b30..41908a22 100644 --- a/src/components/EntryListing.js +++ b/src/components/EntryListing.js @@ -57,6 +57,7 @@ export default class EntryListing extends React.Component { key: entry.get('slug'), collection: collection, onClick: browserHistory.push.bind(this, link), + onImageLoaded: () => this.bricksInstance.pack(), text: entry.getIn(['data', collection.getIn(['card', 'text'])]), image: entry.getIn(['data', collection.getIn(['card', 'image'])]), });