重新加载时 justifiedGallery 中断

Question

我正在为我的网页使用 justifiedGallery。当我第一次访问该页面时，图库会正确显示。但是当我重新加载页面时，它会中断。

我正在使用 meteor 和 react。

旧代码示例：

$(document).ready(() => {
  $('#gallery').justifiedGallery({
    rowHeight: 400,
    fixedHeight: false,
    lastRow:   'justify',
    margins:   -3,
  });
});

我已将其放入 jQuery setTimeOut() 函数。

setTimeout(function(){
  $('#gallery').justifiedGallery({
    rowHeight: 400,
    fixedHeight: false,
    lastRow: 'justify',
    margins: -3,
  });
}, 100);

现在一切正常。我只需要知道这是修复它的正确方法吗？这是为了将来的证明。

Answer 1

你永远不应该运行像那样全局操作 DOM 的代码。您得到的是实际模板呈现的竞争条件。这有时会随机工作，有时随机不会，并且总是运行与模板引擎发生冲突，这最多会阻碍应用程序的性能。

将画廊创建移动到 Template.onRendered() 方法并使用 this.$('.gallery') 而不是 $('#gallery')。如果您使用的是 React，则等效位置是包含 .gallery div.

的演示组件的 componentDidMount 方法

旁注：不要使用 id 进行元素选择，使用类或数据属性。 ID 是一种不好的做法，因为您创建的组件不可重用并且可能存在性能问题。

重新加载时 justifiedGallery 中断

justifiedGallery break when reloaded

jquery

meteor

reactjs

image-gallery