All topics

How to make skeleton loader for <img>?

Ben H

1 month ago

I am trying to make a skeleton loader for an <img> element. In code you would simply add an onLoad attribute that executes a function that updates the class of the <img> element. How would I do this in toddle? I don't see how to access the image load event in toddle.
Max

1 month ago

Hi! You can add any event listener to an element in toddle. Just go to the "Other" section and add the one that you need 🙂
🔥1
...in the "Events" tab
Ben H

1 month ago

Perfect, thanks Max!
💪1
needtheanswers

1 month ago

@Ben H Do you mind showing how you set this up? Once you´ve set the load event how do you actually check if the image is currently loading?
@needtheanswers
@Ben H Do you mind showing how you set this up? Once you´ve set the load event how do you actually check if the image is currently loading?
Max

1 month ago

The event fires when it is done loading
@Max
The event fires when it is done loading
needtheanswers

1 month ago

you mean it does that by default?
@needtheanswers
you mean it does that by default?
Max

1 month ago

I am not sure what you mean… When an image is done loading, it fires the event „load“. And by adding this event in the Events tab, you attach a listener to the img that listens for this event. If this event was not fired, the image has not finished loading
@Max
I am not sure what you mean… When an image is done loading, it fires the event „load“. And by adding this event in the Events tab, you attach a listener to the img that listens for this event. If this event was not fired, the image has not finished loading
needtheanswers

1 month ago

Ahhh I get it now, thank you for the explanation @Max 🙂
💪1

How to make skeleton loader for <img>?

Ben H

Max

Ben H

needtheanswers

Max

needtheanswers

Max

needtheanswers

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community