允许Meteor.js在调用插件之前等待图像加载

Question

在使用Meteor中的同位素插件时，同位素总是将一种类型的height: 0应用于同位素div .grid-container。这可能是由于插件初始化之前，图像已经加载。在控制台中手动运行$('.grid-container').isotope()会导致同位素使div可见。

问题：如何才能在div .item中的所有图像加载之后才触发插件初始化？从imagesLoaded内部调用同位素的Template.name.rendered方法似乎不起作用。

main.js

Template.main.rendered = function () {

     $('.grid-container').imagesLoaded(function() {
        $('.grid-container').isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            masonry: {
                columnWidth: 200
            }
        })
     })

};

main.html

<template name="main">
    <div class="grid-container">

        {{#each items}}
            {{> item}}
        {{/each}}

    </div>
</template>

Answer 1

如上述评论所要求的那样..。

这里是如何使用中间DOM元素进行同位素图像加载，然后再进行最后的附加和布局。

此示例适用于主干，但在Meteor中应该工作得很好。这两种情况的关键方面都是在空元素上初始化isotope()。例如：<div class="isotope"></div>

如下面所示，我在Backbone中有一个Backbone，它处理所有这些，并在将项目添加到集合时一次呈现一个项目。当然，在流星中，这不是我们应该采取的方法。

为了记录在案，我不确定流星的例子是否会开箱即用，但它离我们不远。我没有像我提到的那样在流星上使用同位素。骨干的例子是坚实的，并在生产中为我们工作。

下面是例子..。

Meteor示例：

// In Meteor, you want your collection and the DOM element
Template.main.rendered = function() {

  // Pretty sure this.$ selector works in Meteor rendered
  this.$container = this.$('.isotope').isotope({
    itemSelector: '.gridItem',
    masonry: {
      columnWidth: '.gridSizer',
      gutter: '.gutterSizer'
    }
  });

  var items = CollectionName.find().fetch();

  var $holder = $('<div></div>')

  _.each(items, function(item) {
    // However you load external or partial templates in Meteor (not sure)
    $holder.append(partialTemplate(item));        
  }

  // Load images
  $holder.imagesLoaded(function() {
    // Append and layout on isotope        
    self.$container.append(item).isotope('appended', $holder);
  });
}

在Meteor中，您可以在发布函数中使用添加的回调，如果需要，可以一次将模型发送到客户端。我还没有深入到Meteor的分页中去了解处理这一问题的最佳方法。

主干示例：

// Collection Add event
renderItem: function(model) {
  var self = this;

  // Run it through template
  var item = $(self._template(model.toJSON()));

  // Load images
  item.imagesLoaded(function() {
    // Append and layout on isotope        
    self.$container.append(item).isotope('appended', item);
  });
}

// Standard view render function
render: function() {
   this.$container = this.$el.isotope({
    itemSelector: '.gridItem',
    masonry: {
      columnWidth: '.gridSizer',
      gutter: '.gutterSizer'
    }
  });
}