From 14a6fa5d78bc109489f0e030292a03e8e4d39342 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 13 Apr 2016 15:08:47 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/image.html | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/releases/next/docs/image.html b/releases/next/docs/image.html index 375ed7540dc..70143506f0d 100644 --- a/releases/next/docs/image.html +++ b/releases/next/docs/image.html @@ -43,7 +43,8 @@ loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to -preload images will be provided as a separate API.

Examples #

Edit on GitHub
'use strict'; +preload images will be provided as a separate API.

static prefetch(url: string) #

Prefetches a remote image for later use by downloading it to the disk +cache

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -59,11 +60,14 @@ preload images will be provided as a separate API.

< var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; var ImageCapInsetsExample = require('./ImageCapInsetsExample'); +const IMAGE_PREFETCH_URL = 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now(); +var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL); var NetworkImageCallbackExample = React.createClass({ getInitialState: function() { return { events: [], + startLoadPrefetched: false, mountTime: new Date(), }; }, @@ -82,9 +86,26 @@ preload images will be provided as a separate API.

< style={[styles.base, {overflow: 'visible'}]} onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)} onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)} - onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)} + onLoadEnd={() => { + this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`); + this.setState({startLoadPrefetched: true}, () => { + prefetchTask.then(() => { + this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`); + }, error => { + this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`); + }); + }); + }} /> - + {this.state.startLoadPrefetched ? + <Image + source={this.props.prefetchedSource} + style={[styles.base, {overflow: 'visible'}]} + onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)} + onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)} + onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)} + /> + : null} <Text style={{marginTop: 20}}> {this.state.events.join('\n')} </Text> @@ -197,7 +218,8 @@ exports.examples : 'Image Loading Events', render: function() { return ( - <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/> + <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}} + prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/> ); }, },