Meteor: onRendered event on image possible?

Question

I want to check if an image has been fully loaded. So I'm using onRendered on the template with the image:

template

<template name="backgroundImage">
    <img class="bg blur" src="{{image}}">
</template>

helper

Template.backgroundImage.helpers({
    image: function() {
        return '/images/background_1.jpg';
    }
});

event

Template.backgroundImage.onRendered(function() {
    console.log('image loaded, start fadeOut on overlay');
});

My question now is if this really works? Does onRendered fire at the moment when the image has loaded or does it fire for just loading the html?

My aim is to fadeOut an overlay with a loading animation after the image has fully loaded. The user should see the content of the page after(!) the image has loaded.

Answer 1

onRendered will only fire after the HTML img tag has been rendered to the DOM, but it won't wait until the image has actually fully loaded.

You can use the load event to check this :

Template.backgroundImage.events({
  'load img'(event, template) {
    console.log(template.$('img').prop('width'));
  },
});