Onload event with <img>

1

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">
2

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

connect(){}

3

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.

4

I take it you’ve also tried the following

2 Likes
5

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) {
      this.process()
    }
  }

  process() {
    // …
  }

  get isLoaded() {
    return this.element.complete
  }
}
8 Likes
6

Thank you, @javan! It works for me.