Метеор: возможно ли событие onRendered на изображении?

Question

Я хочу проверить, полностью ли загружено изображение. Так что я использую onRendered по шаблону с изображением:

шаблон

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

помощник

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

событие

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

Мой вопрос сейчас, если это действительно работает? Есть ли onRendered срабатывает в тот момент, когда изображение загружено или оно запускается только для загрузки HTML?

Моя цель состоит в том, чтобы постепенно наложить оверлей с анимацией загрузки после полной загрузки изображения. Пользователь должен увидеть содержимое страницы после (!) Загрузки изображения.

Answer 1

onRendered будет срабатывать только после HTML img тег был представлен в DOM, но он не будет ждать, пока изображение фактически полностью загрузится.

Вы можете использовать load событие, чтобы проверить это:

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