Image events

The 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.

There’s also onImageLoadError, which gets triggered when the image could not load for some reason (not found, a server error, wrong domain name,…).

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).

Image events example

The prototype below creates an imageLayer…

# 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 lorempixel.com.

# 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.

Image events example