How to respond to img load event with Ractive?

Question

I have an image element that i want to control load event with Ractive. So, in case of error, I can show another image.

<img class="someimage" src="{{src}}" />

With jQuery this is pretty simple, I only write:

$(".someimage").on("load", function(){...});

But when Ractive I cannot make it work the same way:

<img src="{{src}}" on-load="imageload" />

ractive.on("imageload", function(){
  console.log("image loaded!");
});

I was doing some research in MDN and Image Element doesn't seem to have load event... so how is this working with jQuery ? And how can I make it work with Ractive ?

Answer 1

You have a typo (imageloag instead of imageload) in your code.

If you change that, it will work normally. Look:

var ractive = new Ractive({
   el: 'container',
   template: '#myTemplate',
   data: {
     src: 'http://www.spacebrindes.com/content/interfaces/cms/userfiles/produtos/002x971_bolinha_anti84.jpg'
   }
});

ractive.on('imageload', function(e) {
  console.log('image loaded');
});

<script src="//cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
<div id='container'></div>

<script id='myTemplate' type='text/ractive'>
    <img src="{{src}}" on-load="imageload" />
</script>