1

In this case I am using persistent storage. I am noticing that images (even very low-res ones, like 40 KB and 300x300px) have a "mandatory" loading delay of about 500ms. Of course, being Javascript, I can pre-load all the images I am ever going to use, but this would kill memory usage. I can also pre-load the images before loading the new page, but that's a bit cumbersome. I am not sure if there is some trick to eliminate or reduce this delay.

I am using Cordova/Crosswalk (crosswalk-cordova 10.39.235.13-arm), which runs Chrome 39.0.2171.71.

Any idea to make this faster and/or as instant as possible?

Agamemnus
  • 1,395
  • 4
  • 17
  • 41

2 Answers2

2

Do you have the file path of the image or do you need to access it using the filesystem every time?

I have a similar problem when I was getting the image from the filesystem each time I want to load it. However, keeping a dictionary of every image (giving it an id) and its full url on the filesystem, and getting the urls from the dictionary instead of the filesystem each time, made it load significantly faster.

If that is still too slow for you, you have 2 other options that are actually work arounds and your choice should depend on your app business:

  1. Show a placeholder image until the actual image is loaded.

  2. Delay showing the entire screen with the images for 500ms. The delay will be less annoying to the user than the missing images.

gafi
  • 12,113
  • 2
  • 30
  • 32
  • What do you mean by accessing it using the filesystem versus having the full path? I use ``cdvfile://`` for the persistent images but I actually tried images inside the APK itself and it didn't make a difference on the loading screen. How would I "get a full path"? Do you mean this? http://stackoverflow.com/questions/15261532/get-absolute-path-to-assets-folder-in-phonegap – Agamemnus Feb 13 '15 at 08:18
  • Yes, I mean cache the full path to the image instead of getting it from the files system – gafi Feb 17 '15 at 15:10
  • Unfortunately, the dictionary thing (``window.resolveLocalFileSystemURL`` + ``fileSystem.nativeURL`` from the result) didn't change the speed at all. :( – Agamemnus Feb 22 '15 at 02:34
  • I ended up preloading everything. :( – Agamemnus Feb 22 '15 at 05:00
  • Sorry for that. Cordova file system plugin is kinda slow anyway. – gafi Feb 27 '15 at 22:37
0

I would guess you're hitting Browser Reflow problems, where referencing a new unknown image means the browser has to recalculate positions of lots of elements.

Straight off, you can consider adding the height= and width= attributes to your IMG tag. Also, take a look at :

https://developers.google.com/speed/articles/reflow

http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

racraman
  • 4,988
  • 1
  • 16
  • 16
  • Nothing to do with this. It is the images that have a loading delay, not the elements. Image element widths and sizes are already defined and the elements are already all present on the screen. – Agamemnus Feb 11 '15 at 23:00