如何用react响应img load事件

How to respond to img load event with Ractive?

本文关键字：load 事件 img 响应 何用 react      更新时间：2023-09-26

我有一个图像元素，我想用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和图像元素似乎没有load事件…那么这是如何与jQuery一起工作的呢?我怎样才能使它与Ractive一起工作呢?

你的代码中有一个错别字 (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>

相关文章：