Onload event with <img>

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