Показывать загрузчик при загрузке изображений Meteor CollectionFS и S3?

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 }} Загрузчик-шаблон работает хорошо, но это длится только доли секунды, потому что фактическая загрузка происходит очень быстро. Это загрузка, которая может занять несколько секунд (иногда до двадцати или даже даже на маленьком изображении). Есть ли способ проверить/проверить, загружено ли изображение?

Я использовал FF Inspector, чтобы узнать, была ли задержка в src, установленной на теге img, но она устанавливается сразу. Таким образом, ожидание действительно на S3 ... ничто не меняется в DOM, когда оно наконец загружается.

Я использую CollectionFS и адаптер S3 (Meteor-cfs-s3).

Answer 1

Я понял. Я искал неправильную вещь в Google. Вопрос в том, как использовать 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'}}

редактировать: Вот мой заказ помощник, чтобы проверить это загрузить & хранится в амазонки s3 (Так что я могу смело создать амазонки s3 URL и показать его пользователю).

Что в моем случае выглядит следующим образом:

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, и когда он исходит от сервера, это означает, что он фактически сохранен на amazon s3, this.hasStored выполняет аналогичную проверку, но я обнаружил, что он повторно запускается слишком много раз, может быть, нужно сообщить это для github, чтобы они могли это исправить.