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......

[rangav]

simplifying the for in loop to below, made it fast. reduced time from 1000ms to < 100ms

for (PHAsset* asset in results) {
    
    [assets addObject:@{
                        @"width": @([asset pixelWidth]),
                        @"height": @([asset pixelHeight]),
                        @"id": [asset localIdentifier],
                        @"creationDate": [asset creationDate],
                        @"uri": [NSString stringWithFormat:@"ph://%@", [asset localIdentifier]],
                        @"duration": @([asset duration])
                        }];
  }

[pentarex]

Is this code from this library? If you want you can make pull request, after all you are the author of it :)

[rangav]

ok will do more research and testing and then will do pull request.

[pentarex]

Also what are you testing? The response from the library or when the images are loaded?

[rangav]

how to get response the from library faster and also image loading.

[rangav]

one question about image loading in RNImageLoader.m

instead of resizing the local image every time in RNImageLoader is it possible to cache previous resized image and load that image next time? if cache not exists resize image.

So we can make image loading also faster

[pentarex]

you can try but implementing so many stuff like delete, create....

[pentarex]

Also for iOS only image component has the cache property. You can try and use it. Sadly not working on android

[rangav]

send a pull request for this, review and let me know any comments

[youanswer]

sorry do you have any update on this?