我刚刚将Meteor应用程序升级到0.8版本,并且出现了一个小的UX难题。
我有一个可更改的图像,显示如下:
<img src="/img/{{ image_name }}" class="pull-left">
用户可以选择新图像(更改image_name
,这是集合中的字段),图像会自动在屏幕上更改。
但是,在我的测试中,新图像加载时的行为似乎不同。在Meteor 0.7中,图像变为空白,而新图像加载。在Meteor 0.8中,旧图像保持在屏幕上,直到加载新图像。我可以理解为什么这通常会是一个更好的结果,但在我的情况下,用户会想知道为什么图像没有改变,可能会持续几秒钟。
所以我想在加载新图像时显示加载动画。我可以在选择新图像时启动动画,但是如何知道图像何时完成加载,以便我可以删除动画?
或者我误解了发生了什么?
谢谢!
答案 0 :(得分:2)
您需要以某种方式使用图片load
事件。一种可能的解决方案是拥有两个图像,一个呈现给用户,第二个呈现在隐藏的div中。隐藏的一个有一个反应源,就像你现在已经得到它一样。可见一个是静态的。
当用户选择新图像时:
在隐藏图片的load
回调中,将可见图片的来源交换为实际的新来源。有关如何设置此类回调的信息,请参阅this question。
答案 1 :(得分:1)
按照@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');
}
希望能帮助别人。