Rendering Template after Child Image Loaded

help
1

I’m building a Cordova chat app, and I’m having an issue with displaying images. My simplified template looks like this:

<template name="Messages_Index">
  <div class="list">
    {{#each messages}}
      <div class="message-wrapper">
        {{#if image type}}
          <img src="{{content}}">
        {{else}}
          <p>{{content}}</p>
        {{/if}} 
      </div>
    {{/each}} 
  </div>
</template>

Everything works fine, however, if the connection is bad, the images take awhile to load, rendering an empty chat bubble to the DOM without anything inside until the image loads.

Is there a way to delay appending the message until after the image loads?

2

You could consider keeping the message rendered but hidden until the image is fully loaded. You’ll know when the image has loaded by watching for the load event. For example:

Template.Messages_Index.events({
  'load img'(event, instance) {
    console.log('Image fully loaded - time to un-hide my message!');
  }
});
1 Like
3

Perfect! I added a class to the wrapper div when it was an image and just removed the class on the load event. Working great! Thanks!