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