流星：图像上的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 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'));
  },
});