Meteor：图像上的 onRendered 事件可能吗？答案

【问题标题】：Meteor: onRendered event on image possible?Meteor：图像上的 onRendered 事件可能吗？
【发布时间】：2015-12-26 08:02:57
【问题描述】：

我想检查图像是否已完全加载。所以我在带有图像的模板上使用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 时触发？

我的目标是在图像完全加载后使用加载动画淡出叠加层。用户应该在（！）图像加载之后看到页面的内容。

【问题讨论】：

【解决方案1】：

onRendered 只会在 HTML img 标记被渲染到 DOM 后触发，但不会等到图像实际完全加载。

您可以使用load 事件来检查：

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

【讨论】：