Preloading images for faster display

Question

I'm using "React native" to build an iOS app at the moment.

I'm currently noticing an issue while displaying images in the "Image" element when loading images from the internet via source={{uri: ...}}. Sometimes, I see a short white flash of the images, as if it was reloading the image. This reloading is connected to the fact that I'm kind of shifting the image from one "Image" element to another.

However, this "white flash" is not happening when using a local image (e.g. from XCode). My idea was now to pre-load the image and save it "locally" and then use the local image as source for the "Image" component instead of the URL. This would aswell decrease the traffic generated.

Could you please give me a hint how to do that? I have read in the "Image" documentation that you can have local images as source, but I don't know yet how to create them "on the fly".

This question has been asked before, check [here](http://stackoverflow.com/questions/476679/preloading-images-with-jquery) for an easy way to preload your images! — AboutTime, Apr 14 '15 at 14:53
I've found this thread before but wasnt sure whether its valid for react-native aswell - is it? — Philipp K., Apr 14 '15 at 14:57
Im not sure, i havent used React-Native before but at first glance i dont see why it wouldnt? — AboutTime, Apr 14 '15 at 15:05
Well, I'm including an Image with )}> and I dont yet get the connection to the other thread here — Philipp K., Apr 14 '15 at 15:09
Hmm, Then im not sure if it is possible. You need that connection to preload the images. — AboutTime, Apr 14 '15 at 16:55
Also, for meta responses (e.g. dups), please use comments, not answers. — hayesgm, Nov 25 '15 at 02:12
@PhilippK. Did you come up with a solution for this? If yes, please post an answer. — Naisheel Verdhan, Apr 09 '16 at 16:05

jewel · Answer 1 · 2016-06-29T23:29:04.983

1

The latest RN now includes some prefetching capabilities. Look at https://facebook.github.io/react-native/docs/image.html and see the two methods:

getSize and prefetch

If you're stuck on an older version, you can also read this ticket for instructions on how you can enable your own prefetching in iOS: https://github.com/facebook/react-native/issues/2314

edited Jun 29 '16 at 23:29

answered Jun 29 '16 at 23:21

jewel

761
5
10

Preloading images for faster display

1 Answers1