如何在 Meteor 0.8 中加载图像时显示加载动画答案

【问题标题】：How to display a loading animation while an image loads in Meteor 0.8如何在 Meteor 0.8 中加载图像时显示加载动画
【发布时间】：2014-03-28 22:35:48
【问题描述】：

我刚刚将 Meteor 应用升级到 0.8 版，出现了一个小的 UX 困难。

我有一个可变图像，显示如下：

<img src="/img/{{ image_name }}" class="pull-left">

用户可以选择一个新图像（更改image_name，它是集合中的一个字段），图像会在屏幕上自动更改，这应该是。

但是，在我的测试中，加载新图像时的行为似乎有所不同。在 Meteor 0.7 中，加载新图像时图像变为空白。在 Meteor 0.8 中，旧图像会一直显示在屏幕上，直到加载新图像。我可以理解为什么这通常会是一个更好的结果，但在我的例子中，用户想知道为什么图像没有改变，可能有几秒钟。

所以我想在新图像加载时显示加载动画。我可以在选择新图像时启动动画，但是我如何知道图像何时完成加载，以便我可以删除动画？

还是我误解了正在发生的事情？

谢谢！

【问题讨论】：

标签： meteor

【解决方案1】：

您需要以某种方式使用图像load 事件。一个可能的解决方案是有两个图像，一个呈现给用户，第二个在隐藏的 div 中。隐藏的有一个反应源，就像你现在得到它一样。可见一个是静态的。

当用户选择新图片时：

将可见图像源设置为微调器（通过 jQuery），
更新模型以便反应图像开始加载，

在隐藏图像的load 回调中，将可见图像的源交换为实际的新源。请参阅this question 了解如何设置此类回调。

【讨论】：

这听起来像我需要的。我不知道图像加载事件。谢谢！

【解决方案2】：

按照@Hubert OG 的建议，我解决了如下问题。

在我的模板中：

<div class="img-space">
    <div class="img-loading"></div>
    {{ triggerImageLoad }}
</div>

img-loading 类显示微调器；我将使用triggerImageLoad 调用将其替换为真实图像。（虽然我不喜欢使用这样的调用来产生副作用 - 有没有更好的方法？）

选择新图像后，我再次用微调器替换图像。在 Meteor 0.8 中，对 DOM 进行此类更改是可以的。所以javascript是：

function loadImage(cat) {
    if (cat) {
        var imageObj = new Image();
        imageObj.src = '/img/cat/'+cat.image_name;
        imageObj.addEventListener('load', function() { 
            $('.img-space').empty();
            $('.img-space').append($(imageObj));
        }, false);
    }
}

Template.myTemplate.triggerImageLoad = function() {
    var myCat = Cats.findOne(Session.get("cat_id"));
    loadImage(myCat);
}

Template.myTemplate.events(
    {'click .newImage' : function (evt, tmpl) {
            var catId = Session.get("cat_id");
            var myCat = Cats.findOne(catId);
            var new_image_name = evt.target.getAttribute('data-name');
            $('.img-space').empty();
            // don't like putting html in the js code - is there a better way?
            $('.img-space').append('<div class="img-loading"></div>');
            Cats.update(catId, {$set: {image_name: new_image_name}});
        }
    }
);

最后，24x24 像素微调器和 200x200 像素图像的 css 是：

.img-loading {
    position: absolute; 
    top:88px; 
    left:88px; 
    width: 24px; 
    height: 24px;
    background-image: url('/img/site/img-loader.gif');
}

希望对其他人有所帮助。

【讨论】：