How to load images faster

[rangav]

Hi @pentarex

I am loading images in paging of 40 images limit per request. When i test on iphone 6 its slow takes around a 1 sec to first each set of images to load.

I was testing other apps they are loaded instantly? like whatsapp

Is there anything we can to mimic to load faster?

[pentarex]

yes there is a way.
RNImageLoader.m is loading the images in high quality

imageOptions.deliveryMode = PHImageRequestOptionsDeliveryModeHighQualityFormat;

the problem is not with the library itself, it is showing the images.
I guess we can do it the following way, when the prefix is not assets-library but lowq-assets-library for example to load it FAST and the response of the JSON to return two values - with low and high quality url. Also the image loader should check for this prefix in order to load them faster.

I will try in a while :)

[pentarex]

can you try if this is working for you. Its in a new branch. I don't want to bump new version in npmjs, try to take it from the branch into your package.json

[pentarex]

the property which is coming is called lowQualityUri

[rangav]

ok thanks will try and let you know

[rangav]

One question:

How are these 2 classes are linked to each other?
RNImageLoader.m
RNGalleryManager.m

[pentarex]

RNGalleryManager returns assets-library url which is not recognisable by iOS. When you load uri via the Image component react-native (RNImageLoader) hijacks the url and loads the image from the local gallery, otherwise react-native would not be Able to load local images, only images from the web.

I hope I explained it clearly

[rangav]

Thanks thats clear now

So your implementation of RNImageLoader.m overrides the RN implementation?

[pentarex]

Yes, I simply wanted to remove the CameraRoll dependency from my library

[rangav]

The RCTImageURLLoaders <RCTPhotoLibraryImageLoader: 0x600000019050> and <RNImageLoader: 0x600000019070> both reported that they can load the URL assets-library://asset/asset.mov?id=11D2B45E-FD85-4E00-9C99-9224964BF995&ext=mov, and have equal priority (0). This could result in non-deterministic behavior.

Getting this error?

[pentarex]

You have to unlink CameraRoll from your project. I've stated this in the README.md file

[rangav]

if we set loaderPriority, its working , no need to remove CameraRoll

- (float)loaderPriority{
  return 5;
}

[rangav]

initial test showing not much difference between uri or lowQualityUri, taking almost same time to load

and with lowQualityUri the quality is too low and blurry

[rangav]

one more question:

i was able to load images without the RNImageLoader.m class, what is the need for this additional class?

[pentarex]

It is loading the images from the local gallery. Yes you can load it because you have camera roll library linked m. If you unlink both of the libraries it will not work......