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

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

问题：只有在div .item中的所有图像加载后，我们如何才能触发插件初始化？从Template.name.rendered内调用同位素的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>

来源

2014-05-11 Nyxynyx

你找到答案吗？我遇到同样的问题... – seb

在处理Backbone中的相同问题时，我只使用了一个中间DOM元素来保存项目。一旦物品被加载，你就会追加到一个容器中。不是流星的具体，但应该在这里工作。 – Brandon

@Brandon听起来有趣，你可以发表一个例子吗？ – Nyxynyx

如上评论请...

下面介绍如何使用一个中间DOM元素同位素图像加载之前做最后的追加和布局。

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

正如你可以看到下面，我有一个Backbone这grid_view处理这一切，并呈现项目之一，在为它们添加到集合的时间。当然，在流星中，这不是采取的方法。

为了记录，我不确定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); 
    }); 
}

流星，你可以使用添加的回调在你的发布功能，该机型在发送给客户端一个一个时间，如果你想。我还没有与流星分开来了解处理这个问题的最佳方法。

骨干例子：

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

来源

2014-09-16 17:19:43 Brandon

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

回答

相关问题