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

Question

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

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

ma​​in.js

Template.main.rendered = function () {

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

};

ma​​in.html

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

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

    </div>
</template>

Answer 1

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

下面介绍了如何在执行最终追加和布局之前使用中间 DOM 元素加载同位素图像。

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

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

郑重声明，我不确定 Meteor 示例是否可以开箱即用，但相距不远。正如我提到的，我没有在 Meteor 中使用同位素。 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'
    }
  });
}