onImageLoaded event will notify when an image is loaded and ready to display so that you can take actions such as fading it in, for example. Naturally, you’ll use this only on images that are downloaded from the internet.
onImageLoadError, which gets triggered when the image could not load for some reason (not found, a server error, wrong domain name,…).
|The image is loaded and ready for display.|
|The image could not be loaded or downloaded.|
Be sure to attach these events to the layer before settings its
image property, otherwise, the image might have already loaded (even from an online source).
The prototype below creates an
# A layer, empty for now imageLayer = new Layer size: 600 borderRadius: 10 point: Align.center opacity: 0
…attaches the events…
# The image loaded successfully imageLayer.onImageLoaded -> label.html = "Done !" Utils.delay 1, -> imageLayer.animate opacity: 1 label.animate opacity: 0 options: time: 3
# Something went wrong imageLayer.onImageLoadError -> label.html = "Image loading error"
…and only then loads an image from
# Loading a large image (1200 x 1200 pixels) imageLayer.image = "https://lorempixel.com/1200/1200/"
Once the image downloaded, the “Loading…” text will change to “Done !”, and the image will fade in while the text label fades out.
Tip: You can change
lorempixel.com to something like
lorempixel.co to see what happens when
onImageLoadError gets triggered.