Forum Discussion
Solved
Preload webobjects. Is it possible?
This is a more advanced question:
During the lesson, I use the OpenAI API to generate an image. Once I retrieve the image URL, I pass it to a web object to load the image from the URL. However, when someone opens the slide, it takes approximately 1–2 seconds to load the image. Is there a way to preload the web object or otherwise ensure the image loads faster?
Any other ideas how to load the image from the URL?
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. 😉
Is the WO local to your module or or does it link to an external site? Is the delay from generating the OpenAI image, fetching the finished image through the URL, loading the external page in the WO, or waiting for the local WO to be ready in SL?
If you have the final image URL avsailable in SL, perhaps you can forego the WO and just swap the source attribute of an existing placeholder image of your slide?
At the start of the course, an image is generated, and its URL is stored in a variable. When a slide containing a Web Object is displayed, the variable holding the image URL is passed to the Web Object. The sole purpose of the Web Object is to display the image from the provided URL.
How do I change the source attribute? Can I do that before user is in that slide? What if many users are using the content?
