From 80e04ecdaaf9d847212ec60d196684c2e452e559 Mon Sep 17 00:00:00 2001
From: yany2 <yuan.yan@dianrong.com>
Date: Wed, 22 Nov 2017 15:07:40 +0800
Subject: [PATCH 1/2] add getProgress feature

---
 examples/index.html      |  4 ++--
 examples/src/Examples.js |  6 ++++++
 modules/ImageHelper.js   |  9 ++++++---
 modules/Preload.js       | 10 +++++++++-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 1e68f45..072a7ae 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -43,7 +43,7 @@ <h1>Basic Example with error message</h1>
 
     <script src="https://unpkg.com/react@15.3.0/dist/react.js" defer></script>
     <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js" defer></script>
-    <script src="/react-preload.js" defer></script>
-    <script src="/examples.js" defer></script>
+    <script src="../dist/react-preload.js" defer></script>
+    <script src="../dist/examples.js" defer></script>
 </body>
 </html>
diff --git a/examples/src/Examples.js b/examples/src/Examples.js
index 643e862..5e8de72 100644
--- a/examples/src/Examples.js
+++ b/examples/src/Examples.js
@@ -20,6 +20,11 @@ export class Example1 extends React.Component {
         })
     }
 
+    _getProgress = (completedCount, total) => {
+        const percent = (Math.round(completedCount/total * 10000)/100).toFixed(2) + '%'
+        console.log(percent)
+    }
+
     render() {
 
         const images = [
@@ -35,6 +40,7 @@ export class Example1 extends React.Component {
                 images={images}
                 onError={this._handleImageLoadError}
                 onSuccess={this._handleImageLoadSuccess}
+                getProgress={this._getProgress}
                 mountChildren
                 resolveOnError
             >
diff --git a/modules/ImageHelper.js b/modules/ImageHelper.js
index 442037e..46dc577 100644
--- a/modules/ImageHelper.js
+++ b/modules/ImageHelper.js
@@ -1,11 +1,14 @@
 import ImageCache from './ImageCache';
 
 const ImageHelper = {
-    loadImage(url, options) {
+    completedCount: 0,
+    loadImage(url, options, callback) {
+        console.log(url, options, callback)
         const image = ImageCache.get(url, options);
 
         return new Promise((resolve, reject) => {
             const handleSuccess = () => {
+                callback && callback(++this.completedCount);
                 resolve(image);
             };
             const handleError = () => {
@@ -45,8 +48,8 @@ const ImageHelper = {
         });
     },
 
-    loadImages(urls, options) {
-        const promises = urls.map(url =>  this.loadImage(url, options));
+    loadImages(urls, options, callback) {
+        const promises = urls.map(url =>  this.loadImage(url, options, callback));
         return Promise.all(promises).catch((err) => {
             console.warn(err.message);
         });
diff --git a/modules/Preload.js b/modules/Preload.js
index fe816f8..1039095 100644
--- a/modules/Preload.js
+++ b/modules/Preload.js
@@ -21,6 +21,9 @@ const propTypes = {
     // Success callback
     onSuccess: PropTypes.func,
 
+    // getProgress
+    getProgress: PropTypes.func,
+
     // Whether or not we should still show the content
     // even if there is a preloading error
     resolveOnError: PropTypes.bool,
@@ -43,6 +46,7 @@ class Preload extends Component {
 
         this.state = {
             ready: false,
+            completedCount: 0,
         };
 
         this._handleSuccess = this._handleSuccess.bind(this);
@@ -60,7 +64,7 @@ class Preload extends Component {
         this._mounted = true;
         if (!this.state.ready) {
             ImageHelper
-                .loadImages(this.props.images)
+                .loadImages(this.props.images, {}, this.updateProgress)
                 .then(this._handleSuccess, this._handleError);
 
             if (this.props.autoResolveDelay && this.props.autoResolveDelay > 0) {
@@ -76,6 +80,10 @@ class Preload extends Component {
         }
     }
 
+    updateProgress = (completedCount) => {
+        this.props.getProgress(completedCount, this.props.images.length);
+    }
+
     _handleSuccess() {
         if (this.autoResolveTimeout) {
             clearTimeout(this.autoResolveTimeout);

From acabf27d1a9c85e3f378c232737c898770994449 Mon Sep 17 00:00:00 2001
From: yany2 <yuan.yan@dianrong.com>
Date: Fri, 24 Nov 2017 11:34:45 +0800
Subject: [PATCH 2/2] fix progress bug

---
 modules/ImageHelper.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/ImageHelper.js b/modules/ImageHelper.js
index 46dc577..a5add10 100644
--- a/modules/ImageHelper.js
+++ b/modules/ImageHelper.js
@@ -49,6 +49,7 @@ const ImageHelper = {
     },
 
     loadImages(urls, options, callback) {
+        this.completedCount = 0;
         const promises = urls.map(url =>  this.loadImage(url, options, callback));
         return Promise.all(promises).catch((err) => {
             console.warn(err.message);