Using backbonejs view, what is the best way to attach an “onload” event to an image tag?

Question

I want to attach an "onload" event for an image in a backbonejs view. I am currently including it in the "events" as "load img":"function", but it is not getting fired off.

Any suggestions for doing this?

Answer 1

Backbone's event handling is based on delegate and delegate can only be used with events that bubble. The problem is that load events do not bubble; from the HTML5 specification:

If the download was successful
Set the img element to the completely available state, update the presentation of the image appropriately, and fire a simple event named load at the img element.

And a simple event does not bubble:

Firing a simple event named e means that an event with the name e, which does not bubble (except where otherwise stated) [...]

So you'll have to hook up a handler by hand with something like this:

render: function() {
    var self = this;
    this.$el.append(some_html_with_img_elements);
    this.$el.find('img').on('load', function() { self.img_loaded() });
    return this;
}

Demo: http://jsfiddle.net/ambiguous/c7wH2/