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'])]),
});