Question

我刚刚将Meteor应用程序升级到0.8版本，并且出现了一个小的UX难题。

我有一个可更改的图像，显示如下：

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

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

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

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

或者我误解了发生了什么？

谢谢！

Answer 1

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

当用户选择新图像时：

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

在隐藏图片的load回调中，将可见图片的来源交换为实际的新来源。有关如何设置此类回调的信息，请参阅this question。

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

希望能帮助别人。

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

2 个答案: