Question

我有一个图像元素，我想用Ractive控制加载事件。因此，如果出现错误，我可以显示另一张图片。

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

使用jQuery这很简单，我只写：

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

但是当Ractive我不能以同样的方式工作时：

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

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

我在MDN上进行了一些研究，Image Element似乎没有load事件......那么如何使用jQuery？我怎样才能让它与Ractive一起使用？

Answer 1

您的代码中有拼写错误（imageloag而不是imageload）。

如果你改变它，它将正常工作。看：

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>

如何用Ractive响应img load事件？

1 个答案: