Question

当Amazon S3图像从Amazon S3（或任何地方的任何图像）下载时，是否有任何函数/钩子用于显示加载器？我目前没有使用任何CDN或CloudFront，因此我的下载有时会很慢。我想在图片下载时只显示一个加载器。在我的代码中，我有：

{{#if uploadedCustomLogo}}
   {{#with customLogo}}
      {{#if isUploaded}}
         <div class="img-wrapper">
            <img src="{{this.url store='logos'}}" alt=""/>
         </div>
      {{else}}
         {{> loading}}
      {{/if}}
   {{/with}} 
{{/if}}

问题是上传{{> loading }} loader-template运行正常，但它只持续了一小段时间，因为实际上传速度非常快。这是下载，然后可能需要几秒钟（有时甚至在一个小图像上达到20左右）。有没有办法测试/检查图像是否已下载？

我使用FF Inspector查看src标记上的img设置是否有延迟，但是它会立即设置。所以等待实际上是在S3上......一旦它最终加载，DOM中没有任何变化。

我正在使用CollectionFS和S3适配器（Meteor-cfs-s3）。

Answer 1

我明白了。我在谷歌上搜索错误的东西。问题是如何使用JQuery来监听图像加载时的情况。因此，您只需在模板中添加加载程序，然后在load事件触发图像后隐藏它。这个简单的代码在Meteor中非常有用：

Template.myTemplate.events({

   'load #whateverImage': function(event) {
      event.preventDefault();

      //  Hide your loader DIV (for example)
      hideLoader();
},

Answer 2

解决方案是使用已存储的帮助程序，我也有一个问题，想出这一个isUploaded是对流星服务器，但如果你想等待它上传到亚马逊s3 {{#if this.hasStored 'thumbs'}}

修改这是我的自定义帮助程序，用于检查是否上传＆amp;存储到amazon s3（所以我可以安全地创建一个亚马逊s3网址并显示给用户）。

在我的案例中看起来像这样：

uploadDoc: function () { var fileId = Template.instance().posterData.get('fileId'); // You can ignore this, It's just how I get the file document id. if (fileId) return Images.findOne(fileId); // We need the file document } isUploadedAndStored: function (storage) { if (this && this.copies && this.copies[storage]) return true; } sUrl: function () { if (this && this.copies && this.copies.thumbs) return 'https://s3-us-west-2.amazonaws.com/NAME/' + this.copies.thumbs.key; }

像这样使用它：

{{#with uploadDoc}} {{#if isUploadedAndStored 'thumbs'}} <img class="attachment-thumbnail" src="{{sUrl}}"> {{else}} {{>loading}} {{/if}} {{/with}}

它是如何工作的？当我们订阅上传的文件集时，文档将没有copies，当它来自服务器时，它意味着它实际上保存在亚马逊s3上，this.hasStored做了类似的检查，但我发现它重新运行太多次可能需要向github报告，以便他们可以修复它。

在Meteor CollectionFS和S3图像下载时显示加载程序？

2 个答案: