Forum Discussion
Preload webobjects. Is it possible?
Example project to preload an image and insert it into a later slide.
Demo: https://360.articulate.com/review/content/7cde59a5-b4ff-453c-85b7-14a1b78aa751/review
I'm not saying this is the best option for your needs, but see this example for dynamically swapping an image source.
https://360.articulate.com/review/content/f9885f57-aea7-4d3d-ba4e-ce64bf7ae742/review
If the image size is fixed, then make the placeholder the expected size. If not, you may have to add/modify styling to get the final image the size/shape you need. The placeholder image could be blank, an empty frame, or set to hidden until you need to show the final image.
For anything more specific to your WO setup, you may need to share a sample project to get additional suggestions.
Thank you for the example! Is it possible to perform the swap before the slide is displayed? I have the same problem with this (takes a second to load) because OpenAi image servers aren't the fastest...
I haven't tested this particular situation, so this is a starting point.
SL displays images using an <image> tag inside an SVG element. In a preceding slide, you could create a new SVG element in JavaScript. Create an <image> element assigned to a (global or otherwise accessible) variable and add that to the SVG. Assign the source to the image, which should load the image data.
On the final slide, access the <image> element using the variable reference you created. Assign all of the attributes of the current placeholder <image> element (except xlink:href) to the new one you have referenced. Then you can use the Element: replaceWith() method to replace the original <image> element with the new one.
You might want to identify where the actual delay is coming from before you resort to all of this though. š
Example project to preload an image and insert it into a later slide.
Demo: https://360.articulate.com/review/content/7cde59a5-b4ff-453c-85b7-14a1b78aa751/review
It seems to work overall! However, when loading images from an external URL, the trigger on slide #2 requires some adjustments to function correctly. Specifically, if the JavaScript trigger is set to "When timeline starts," the image does not get replaced. Changing the trigger to "When timeline reaches 0m 0.01s" resolves the issue.
Interestingly, when using images uploaded directly into Storyline, the "When timeline starts" trigger works as intended. Iām not sure why this difference occurs.