Marionette ItemView Event on image loaded
<p>I'm looking for a way to trigger some code once an image has been completely rendered within the browser.  I am using isotopes masonry <a href="http://isotope.metafizzy.co/" rel="nofollow noreferrer">http://isotope.metafizzy.co/</a> plugin that uses the height of the element to calculate the Masonry layout, but unfortunately the <code>onShow</code> and <code>onRender</code> events fire too early, before the image has fully loaded and rendered and therefore the wrong height is being calculated by isotope. I tried using <a href="https://github.com/desandro/imagesloaded" rel="nofollow noreferrer">https://github.com/desandro/imagesloaded</a> to help solve the issue, but the code is still firing too early.  Any suggestions how I can ask the ItemView to wait until the image is fully displayed within the DOM?</p>
<pre><code>List.Recipe = Marionette.ItemView.extend({
    template: '#recipe-list-item',
    model: this.model,
    className: 'isotope--recipe',
    serializeData: function () {
      var data = this.model.toJSON()
      return data
    },
    onShow: function () {
      $(this).imagesLoaded().done( function () {
        $('.isotope--recipes').isotope({
          itemSelector: &quot;.isotope--recipe&quot;,
          masonry: {
            gutter: 25
          }
        })
      })
    }
  })
</code></pre>
<p>I've also tried</p>
<pre><code>List.Recipe = Marionette.ItemView.extend({
    template: '#recipe-list-item',
    model: this.model,
    className: 'isotope--recipe',
    serializeData: function () {
      var data = this.model.toJSON()
     return data
    },
    initialize: function () {
      Marionette.bindEntityEvents(this, this, this.events)
    },
    triggers: {
      'load img': 'image:loaded'
    },
    events: {
      'image:loaded': 'masonryise'
    },
    masonryise: function () {
      $('.isotope--recipes').isotope({
      itemSelector: &quot;.isotope--recipe&quot;,
      masonry: {
       gutter: 25
      }
  })
}
})
</code></pre>