Swapping images

Is it possible to swap images before a scene / project loads?

I need to update an old educational project (not Saola) that is normally run on classroom desktops but will now include some iPads on Wifi and was wondering if I could give the user access to high resolution images for their retina screens as the project is only 1024 so the images are currently also 1024 and tend to be blurry.

I know I could simply use 2048 x 1536 images for everyone but I also know that some school have classrooms away from the main hotspot points and the Wifi can be weaker making it impractical to load larger file sizes.

I thought about using scrset with an x-descriptor but I wasn’t sure if the browser selects the image based on just pixel ratio or connection speed as well? Also it would mean having to put all the images inside HTML Widgets which I’d rather not do.

Therefore if I give the use the choice, can Saola change the scr of an image before it loads?

Hi Mack,

I’m afraid that it’s not possible because Saola Animate preloads all image resources at the beginning.
Even though we can do that, it’s not easy to check connection speed with JavaScript to decide which image should be loaded.


Thanks Toan Le,

I did wonder at what point in the process the image preloading would occur?

If I ignore the need to check for speed, does the current version of Saola allow for me to use code to simply replace an image source before preloading?

For example:

  1. would using a document create event handler occur before the image preloading?

  2. Is that event or other occurs before image loading can the loader be manipulated to change images?


Hi Mack,

The document Create event occurs before preloading images.
You can add script to that event to alter the document data, including resources.
Please see the attach sample project.

change image before loading.saolapack (78.6 KB)

However, the script depends on internal implementation of the player, so I’m not sure if it still works for later versions.


Thanks Toan Le,

I think as it’s not part of the public API, I won’t implement it unless really necessary for now. But thank you for the example as it’s always useful and interesting to see how something works inside.