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