Onload event with <img>

Hi there!
Is there a way to fire stimulus event when image has been loaded?

I’ve tried both load and onload, but it doesn’t work:

<img src="image.jpg" data-controller="test" data-action="load->test#doSomething>

<img src="image.jpg" data-controller="test" data-action="onload->test#doSomething">

what about just triggering the desired event when the controller connects?


Thank you for your advice, but I have to wait for image source loading, cause I want to work with the image right after it has been loaded.

I take it you’ve also tried the following


If the <img> element has already loaded when its controller connect()s then you’ve missed the load event. Following @dnwilson’s lead, something like this should work:

<img src="…" data-controller="image" data-action="load->image#process">
// image_controller.js
export default class extends Controller {
  connect() {
    if (this.isLoaded) {

  process() {
    // …

  get isLoaded() {
    return this.element.complete

Thank you, @javan! It works for me.