diff --git a/README.md b/README.md index 97b29b60..edddf33a 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ import { ChatItem } from 'react-chat-elements' | onContextMenu | none | function | ChatItem on context menu | | statusColor | none | color | ChatItem status color | | statusText | none | color | ChatItem status text | +| lazyLoadingImage | none | image path | lazy loading image | @@ -237,6 +238,7 @@ import { ChatList } from 'react-chat-elements' | onClick | none | function | chat list item on click (chat(object) is returned) | | onContextMenu | none | function | chat list item on context menu (chat(object) is returned) | | onAvatarError | none | function | chat list item on error avatar img | +| lazyLoadingImage | none | image path | lazy loading image | ## Input Component @@ -448,6 +450,7 @@ import { Avatar } from 'react-chat-elements' | type | default | string | types: default, circle, rounded(border radius 5px), flexible | | sideElement | none | component | avatar side element | | onError | none | component | avatar img onerror | +| lazyLoadingImage | none | image path | lazy loading image | ## LocationMessage Component diff --git a/src/Avatar/Avatar.css b/src/Avatar/Avatar.css index 9b201061..806fd422 100644 --- a/src/Avatar/Avatar.css +++ b/src/Avatar/Avatar.css @@ -55,3 +55,19 @@ width: 55px; height: 55px; } + +@keyframes avatarLazy { + 0% { + opacity:1; + } + 50% { + opacity:.5; + } + 100% { + opacity:1; + } +} + +.rce-avatar-lazy { + animation: avatarLazy normal 2s infinite ease-in-out; +} diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js index eb657ece..303c1976 100644 --- a/src/Avatar/Avatar.js +++ b/src/Avatar/Avatar.js @@ -3,15 +3,64 @@ import './Avatar.css'; const classNames = require('classnames'); +const loadedAvatars = []; + export class Avatar extends Component { + constructor(props) { + super(props); + + this.requestImage = this.requestImage.bind(this); + } + + isLoaded(src) { + return loadedAvatars.indexOf(src) !== -1; + } + + requestImage(src) { + var self = this; + this.loading = true; + + var loaded = () => { + loadedAvatars.push(src); + delete self.loading; + self.setState({}); + }; + + var img = document.createElement('img'); + img.src = src; + img.onload = loaded; + img.onerror = loaded; + } + render() { + var src = this.props.src; + var isLazyImage = false; + + if (this.props.lazyLoadingImage) { + isLazyImage = true; + + if (!this.isLoaded(src)) { + src = this.props.lazyLoadingImage; // lazy image + + if (!this.loading) { + this.requestImage(this.props.src); + } + } + else { + isLazyImage = false; + } + } + return (