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

【问题标题】：Allow Meteor.js to Wait for Images to Load before calling Plugin允许 Meteor.js 在调用插件之前等待图像加载
【发布时间】：2015-10-25 03:40:05
【问题描述】：

在 Meteor 中使用 Isotope 插件时，Isotope 始终将 height: 0 样式应用于 Isotope div .grid-container。这可能是由于插件在加载图像之前初始化。在控制台中手动运行 $('.grid-container').isotope() 会导致 Isotope 使 div 可见。

问题： 怎样才能在 div .item 中的所有图片都加载完毕后才触发插件初始化？从Template.name.rendered 中调用Isotope 的imagesLoaded 方法似乎不起作用。

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>

【问题讨论】：

你找到答案了吗？我也有同样的问题...
在处理 Backbone 中的相同问题时，我只是使用了一个中间 DOM 元素来保存项目。加载项目后，您将附加到容器。不是 Meteor 特有的，但应该在这里工作。
@Brandon 听起来很有趣，你能举个例子吗？
@Nyxynyx 你能让这个工作吗？我希望我的回答让您朝着正确的方向前进。

标签： javascript jquery meteor jquery-masonry jquery-isotope

【解决方案1】：

按照上面评论中的要求...

这是在进行最终附加和布局之前如何使用中间 DOM 元素加载同位素图像的方法。

此示例适用于 Backbone，但在 Meteor 中应该可以正常工作。在这两种情况下，关键方面是在一个空元素上初始化 isotope()。例如：<div class="isotope"></div>

正如您在下面看到的，我在Backbone 中有一个grid_view，它处理所有这些并在将项目添加到集合时一次呈现一个。自然，在 Meteor 中，这不是采用的方法。

作为记录，我不确定 Meteor 示例是否可以开箱即用，但也不会太远。正如我提到的，我没有在 Meteor 中使用同位素。 Backbone 示例是可靠的，可以在我们的生产环境中使用。

这里是例子...

流星示例：

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

【讨论】：