流星:on渲染事件对图像可能

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'));
  },
});