Not all images are being preloaded/cached when running a javascript function

Not all images are being preloaded/cached when running a javascript function

  

Hi,
  I am trying to let users cache all of the images for my app when the app first loads. I am trying to do it with the following javascript code:

var images = new Array();
 function preload(){
     alert('the function has started');
     for (i = 0; i< preload.arguments.length;i++) {
         images[i] = new Image();
         images[i].src=preload.arguments[i];
         if(images.length == preload.arguments.length){
             alert('the function has completed');
         }
     }

 }


preload('url of img1', 'url of img2', 'url of img3', ....... , 'url of img500');


When this code is run, only the first few images are cached, and the images later are not. Both 'the function has started' and 'the function has completed' are shown, so it leads me to believe that the problem lies not in the code, but rather in how the caching mechanism of the outsystems platform works. Does anyone know what is going on?



Hi Louie,

How are you testing this snippet? Beware that setting the image's source doesn't mean that the image will be loaded right away. You should wait for onload event to make sure that the browser had downloaded the image. Btw this does not have nothing to do with the platform, as we don't control any of these scripts. Why don't you use the caching mechanisms built-in the platform? Are you developing a P10 mobile app?

Hi Joao,

Yes we are developing a P10 mobile app. With reference to the caching mechanisms built-in the platform, I tried searching and could not find or understand anything related on how to cache/preload my images, so I searched up a javascript method as I am more familiar with that. I would like to preload all the images in my app when it first runs so I trigger this script during the onLoad of the splash screen. How should I be using the caching mechanism if this is not the correct way?

From what I understand, there is a HTML5 plugin which can be used to develop web applications on an earlier platform.

If your images are being used somewhere in your screens or css your don't have to worry about it because the platform will automatically store those images in cache for you.

Hi Joao,

The problem is that the platform only caches the images when a user visits the screen with the image. That way, users will have to visit every page before the images are cached. Is there a way in which all the images could be cached on start?

Louie,

That statement is not correct. The platform will cache all the static images that are used either in a screen/block or in the css, so that they are available while the app is offline. Please be sure that you don't have any warnings upon publishing (regarding resources or images).

If something is not working the way I described that should be a problem and I would kindly ask you to submit that feedback.

Hi Joao,

So what you are saying is that if I open the mobile app, kill the wifi and then visit a screen with an image loaded from an external url from an entity attribute in the local storage, I will still be able to see the image? If this is so, then yes I think the platform is not working as it should. I have managed to solve all of my problems but I really have seem to have hit a wall on this one. I seriously exhausted all my options and am stuck here. I have tried a workaround by displaying images with 0 width on the splash screen to cache them but once again not all the images are cached. It seems to me that this is a platform performance problem because the caching (either through the javascript or the workaround) works when only a few images need to be cached. It took me a lot of time to convert the application from online to offline but I would rather have the app online if the images are unable to cache. 

Can you send me the oml?

Hi Joao,

Thank you for your help but I have already changed the entire application back to being online. It seems that this is one battle which I will not be able to win so I decided to revert to an online mobile application. Even while attempting to cache all the images by visiting every page with images loaded from external urls from an entity attribute, there seems to be a maximum cache size because whenever I quit the application, only the last cached images remain and there is no reference as to how we can change the maximum cache size.

Cache size is managed by the Operating System. Also be aware that the platform only caches static images (the ones under the images folder) that are used in screens or css. External images (or referenced by external url) go out of the platform caching scope.