Speed Up Remote Image Load?


#1

I have a list of images that I want to display–using NS Angular and focused on iOS. Each image has its own URL. The issue is that they load very slowly. How can I improve the load time of an array of remote url images?

code is like this:

html:

<RadListView [items]="images">
  <ng-template tkListItemTemplate let-image="item">
      <StackLayout>
          <Image height="100" width="100" src="{{image}}" style="margin-top: 10px;" ></Image>
     </StackLayout>
   </ng-template>
 </RadListView>

ts:

images = ['https://.....jpg', 'https://....jpg',...]

When I load other items remotely on device–text files, audio files, etc.–speed is very good. But the images come in very slow, unless the wifi connection is perfect.

I assume caching could help for when a user loads them and later returns to the page, but I am most interested if there is a way of doing it faster on the original load.


#2

Can you give an example of a bunch of slow images? I wonder if those files are simply significantly bigger than the text/audio files you’re loading.

What you can try though is one of the UI image plugins (with caching). I’m a fan of https://market.nativescript.org/plugins/nativescript-web-image-cache


#3

Are you sure it’s not the UI rendering of the images that is slow? As previously mentioned, you can try to reduce the image sizes and improve caching.

If it’s the UI rendering that slows your app, you can try to add loadMode="async" on your Image to load the image asynchronously. Even better, you could think about integrating the nativescript-fresco plugin for your Android app.


#4

@fthuin nativescript-web-image-cache is xplat (with fresco on the Android side) :+1:


#5

Just discovered this plugin and read that :slight_smile: Awesome!


#6

Thanks, guys. The images are reasonably large–500kb to 1mb right now. Maybe the problem is 1) the image size and 2) that to load the loop, the app needs to hit different urls for each image (the urls themselves are very fast on loading, as I can see if I just plug them into my mobile browser).

I ran the same loop having compressed the images down to about 250kb each, and the performance improved, but they were still pretty slow (at least they loaded, but still took about 6 seconds on a decent but not perfect wifi connection).

All other elements of the page load while the images are being loaded. So the app page actually loads fast, just the images then come in later.

I’ll try the plugin.

Would you expect that loading images in a loop like I am doing, if each image is approx 250kb, would indeed be slow? I am wondering if this is just the expected performance.


#7

Here are few tips to speedup your images to load faster
Reduce image quality
Change image format
Reduce image dimensions
Use the Sirv CDN
Serve images over HTTPS

Hope it will be helpful.


#8

Thanks, all. I have tested the plugin recommended before: https://github.com/VideoSpike/nativescript-web-image-cache .

It seems to work well. One question is how to set the clear cache option. I am not too familiar with how regularly to clear out the cache. Lets say I want to do it every 3 days. The github link provides this code:

import {setCacheLimit} from "nativescript-web-image-cache";
/* Add the code component at a a proper hook */
var cacheLimitInDays : number = 3;
setCacheLimit(cacheLimitInDays);

Do you guys have a full example of this in practice? I am wondering if I still need to provide the clearCache() call (probably), and also what the right hook is for the above code (maybe ngOnInit() )?


#9

I don’t use that feature of the plugin.


How to use Webpack in Development
#10

Isn’t it important to clear the cache?


#11

I mentioned this on the slack channel:

I have had trouble with that caching-plugin (nativescript-web-image-cache), and I am curious if others have too.

When I first used it, it worked great. After that though (after I closed the build down and later tried to do another build onto the device), I could not get the build to work on my device. Seemed like there was “Pods” file in the build that caused problems.
Errors like:

"NSCocoaErrorDomain Code=3840 "No value."
and
"/ios/Pods/SDWebImage/SDWebImage/SDWebImageCompat.h:56:39: warning: this block declaration is not a prototype [-Wstrict-prototypes]"

Anyone have this experience? In some way (I think) the cache that was created was causing these errors and stopping the build from working.

Using Nativescript 4.1.0 with Angular and iOS. Also had used webpack with the build.